模态框1.0

<template>
    <div>
        <div class="box" :class="{‘show‘:showModal}">
            <span class="close" @click="closeModal">×</span>
            <slot name=‘message‘></slot>
            <slot name="btngroup"></slot>
        </div>
        <div class=‘mark‘ v-if="showModal" @click="closeModal"></div>
    </div>
</template>
<script>
export default {
    // 显示和隐藏需要父组件来控制
    props: [‘showModal‘],
    methods: {
        // 关闭、需要触发父组件的close事件。
        closeModal() {
            this.$emit(‘close‘)
        }
    }
}
</script>

       <!-- 在标签上绑定属性，子组件就能接收这个属性 -->
        <!-- 绑定自定义事件close,接受子组件的触发 -->
        <modal :showModal=showflag v-on:close=‘closeModal‘>
            <p class="tip" slot="message">
                {{message}}
            </p>
            <div class="btngroup" slot="btngroup">
                <a @click="showflag=false">取消</a>
                <a>确定</a>
            </div>
        </modal>
         <script>
            showflag: false,
            closeModal() {
               this.showflag = false
                        },
         </script>