vue.js如何写confirm弹窗

Question

我实现点击提交后，弹出选择框。确定：提交，取消：不提交。现在写了个大概，但不知道如何将提交函数和提示框做连接。
弹窗代码：

<transition name="bounce">
                    <div class="kiko-confirm" v-if="visible">
                      <div class="bg"></div>
                      <div class="kiko-container" :style="{width: width}">
                        <div class="header">
                          {{title}}
                          <i @click="close" class="icon-remove icon-large kiko-close-btn" v-if="closeVisible"></i>
                        </div>
                        <div class="content">
                          <slot></slot>
                        </div>
                        <slot name="footer">
                          <div class="kiko-footer" slot="footer">
                            <a href="javscript:void(0)" class="kiko-btn make-sure" @click="confirmMakeSure">确定</a>
                            <a href="javscript:void(0)" class="kiko-btn cancel" @click="confirmVisible = false">取消</a>
                          </div>
                        </slot>
                      </div>
                    </div>
                  </transition>

提交button：

 <button v-on:click="submit($event)">submit</button>

如何能一点击submit就出现上面的弹窗，再点确定就提交呢。

Answer 1

只给方案，不给代码
弹窗 应该封装 为一个函数式组件，内部使用 slot 插入你需求的
代码也封装 在 一个 vue 组件中
保存先调用 保存函数 之后 就结束 调用
this.close 直接把 v-if设为false
不保存 直接 调用this.close 把 外界的 v-if 设为false

Answer 2

给你推荐一个vue的UI库iview

你的submit要控制上边的dom显示的，真正的提交方法应该要写到弹出框的确定按钮上，取消按钮就是控制弹出框隐藏的

Answer 3

再给你推荐一个vue的UI库，element