modal组件问题备忘

问题：

    1、modal关闭与显示只能在外部控制，在组件内控制会导致以后点击modal就出不来了！！

    2、ok函数里怎样异步执行完外部的逻辑代码后再关闭弹框？？例如：点击确定按钮显示加载中，加载完成后再触发弹框关闭，现在只能在外部模拟这种效果！！ 

Vue.component("cc-modal", {
    props: {
        show: {
            type: Boolean,
            default: false,
            required: true
        },
        title: {
            type: String,
            default: "Modal"
        },
        width: {
            type: String,
            default: "50%"
        },
        showFooter: {
            type: Boolean,
            default: true
        },
        footerAlign: {
            type: String,
            default: "right"
        },
        okLoading: {
            type: Boolean,
            default: false
        },
        dragable: {
            type: Boolean,
            default: false
        }
    },
    template: '\
    <div class="cc-modal">\
        <transition name="fade">\
            <div v-if="visible" class="cc-modal-masklayer"></div>\
        </transition>\
        <transition name="fade-down">\
            <div class="cc-modal-container" v-if="visible">\
                <div class="cc-modal-content" :style="modalWidth">\
                    <div class="cc-modal-header">\
                        <slot name="header">\
                            <span class="cc-modal-title">{{title}}</span>\
                        </slot>\
                        <span class="cc-modal-close" @click="close">×</span>\
                    </div>\
                    <div class="cc-modal-body">\
                        <slot></slot>\
                    </div>\
                    <div class="cc-modal-footer" v-if="showFooter" :style="modalFooterAlign">\
                        <slot name="footer">\
                            <cc-button @click="cancel">取消</cc-button>\
                            <cc-button classType="success" @click="ok" :loading="okLoading">确定</cc-button>\
                        </slot>\
                    </div>\
                </div>\
            </div>\
        </transition>\
    </div>\
    ',
    // 这里依赖extend.js中的绑定事件方法
    mounted: function () {
        this.Fn.addEventHandler(document, "keyup", this.escClose);
    },
    beforeDestroy: function () {
        this.Fn.removeEventHandler(document, "keyup", this.escClose);
    },
    data: function () {
        return {
            visible: this.show
        }
    },
    computed: {
        modalWidth: function () {
            var obj = {
                width: this.width
            }
            if (!!Number(this.width)) {
                obj.width = this.width + "px"
            }
            return obj
        },
        modalFooterAlign: function () {
            return {
                "text-align": this.footerAlign
            }
        }
    },
    methods: {
        close: function(){
            // this.visible = false
            this.$emit("cancel", event);
        },
        ok: function (event) {
            // this.visible = false
            this.$emit("ok", event);
        },
        cancel: function (event) {
            this.close()
        },
        escClose: function (event) {
            if (this.visible && event.keyCode === 27) {
                this.close()
            }
        }
    },
    watch: {
        show: function (val) {
            this.visible = val
        }
    }
});

      <!--modal-->
        <div style="margin:15px 0">
            <cc-button @click="testModal" class-type="success" size="large">弹框测试</cc-button>
            <cc-modal :show="showModal" @ok="closeModal('ok')" @cancel="closeModal('cancel')" :ok-loading="okLoad">
                <input type="text" v-model="testB">
            </cc-modal>
            <span>{{testA}}</span>
            <div>弹框拖动问题、通过JS方法调用、（路径模板、字符串模板、ID模板）</div>
        </div>


    </div>

    <script>
        new Vue({
            el: "#test",
            data: {
                showModal: false,
                testA: "子组件访问父级数据！",
                testB: "",
                okLoad: false
            },
            mounted: function () {
                this.$nextTick(function () {
                    this.testB = this.testA
                });
            },
            methods: {
                test: function () {
                    console.log("test")
                },
                testModal: function () {
                    this.showModal = true
                    this.testB = this.testA
                },
                closeModal: function (eventName) {
                    if (eventName == "ok") {
                        this.okLoad = true;
                        // var self = this;
                        // setTimeout(function () {
                        //     self.testA = self.testB
                        //     self.okLoad = false
                        //     console.log("修改成功！")
                        //     setTimeout(function () {
                        //         self.showModal = false
                        //     }, 100);
                        // }, 3000);
                    } else {
                        // this.showModal = false
                    }
                }
            }
        });
    </script>