[JavaScript知识库]vue中一个封装好的弹窗

<template>
    <div id="qf-modal" v-if="visible">
        <div class="mask">
            <div class="wrap">
                <!-- 具名插槽 -->
                <slot name="title"> <!--在这个具名插槽中的内容为 具名插槽的默认值 当在父组件中没有该内容时，则使用这个默认的值-->
                    <div class="title">
                        警告
                    </div>
                </slot>
                <slot name="body">
                    <div class="body">
                            你确定要购买吗
                    </div>
                </slot>
               <div class="wrap__button">
                <button class="model__button--confirm" @click="confirm">确定</button>
                <button class="model__button--cancel" @click="cancel">取消</button>
          </div>
            </div>
        </div>
    </div>
</template>

<script>
//1.需要一个属性，控制组件的显示和隐藏，接受一个visible属性来控制显示和隐藏
//2.需要动态的接受titl body button，如果没有传入的时候，采用默认的结构
//3.点击确定或者是取消按钮的时候需要把模态框关掉，预留方法

//方法名on-confirm点击确定的处理函数
//方法名on-cancel点击取消的处理函数
export default {
    data(){
        return{}
    },
    props:{ //通过props来接受这个visible属性
        visible:{ //表示对visible进行校验
            type:Boolean, //表示这个visible的类型要为布尔值
            default(){ //表示默认值 
                return false //默认为false
            }
        }
    },
    methods: {
        confirm(){this.$emit('on-confirm')},//表示将on-confirm发送出去 类似于发布事件
        cancel(){this.$emit('on-cancel')}
    }
}
</script>

<style scoped>
    .mask{
        position: fixed;
        background-color: rgba(0,0,0,0.3);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .wrap{
        width: 350px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 10px;
    }
    .wrap div{
        margin: 15px 0;
    }
    .model__button--confirm{
        margin: 0 5px;
        outline: none;
        border:0;
        width: 150px;
        height: 30px;
        background: linear-gradient(90deg,#1596fb,pink);
        border-radius: 0.2847rem;
        display: block;
        color: #fff;
        cursor: pointer;
    }
    .model__button--cancel{
        outline: none;
        border: 0;
        width:150px;
        height: 30px;
        background: linear-gradient(90deg,blue,green);
        border-radius: 0.2857rem;
        display: block;
        color: #fff;
        cursor: pointer;
    }
    .wrap__button{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>