vue-cli手写弹窗组件

手写弹窗组件

在components文件创建一个CAlert.vue

<template>
    <div class="CAlert-box">
        <transition name="CAlert">
            <div class="CAlert" v-show="isShow">
                <div class="alert-box">
                    <div class="box-head">
                        <strong class="title">{{title}}</strong>
                        <span @click="Cancel" class="close">X</span>
                    </div>
                    <div class="box-content">
                        <slot name="content"></slot> <!-- 要发生变化的内容用slot插槽占位 -->
                        <div class="box-btn">
                            <button @click="Commit" class="ok">提交</button>
                            <button @click="Cancel" class="no">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
    export default {
        props: ['title', 'content', 'isShow', 'commit'],
        data () {
            return {
            }
        },
        methods: {
            // 关闭 -- 弹窗盒子
            Cancel () {
                this.$emit('Cancel')
            },
            // 提交 -- 弹窗盒子
            Commit () {
                this.$emit('Commit')
            },
        }
    }
</script>
<style lang="scss">
    .CAlert-box{
        .CAlert-enter{
            opacity: 0;
            height: 0;
        }
        .CAlert-enter-to{
            opacity: 1;
            height: 100%;
        }
        .CAlert-enter-active{
            transition: all 0.3s;
        }
        .CAlert-leave{
            opacity: 1;
            height: 100%;
        }
        .CAlert-leave-to{
            opacity: 0;
            height: 0;
        }
        .CAlert-leave-active{
            transition: all 0.3s;
        }

        .CAlert{
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.2);
            .alert-box{
                min-width: 300px;
                min-height: 200px;
                background: #fff;
                border-radius: 10px;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 999;
                transform: translate(-50%, -50%);
                overflow: hidden;
                .box-head{
                    height: 42px;
                    background: #F4F4F4;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    font-size: 14px;
                    line-height: 42px;
                    color: #666666;
                    .title{
                        padding: 0 20px;
                        box-sizing: border-box;
                    }
                    .close{
                        padding: 0 20px;
                        box-sizing: border-box;
                        text-align: center;
                        cursor: pointer;
                    }
                }
                .box-content{
                    .box-btn{
                        position: absolute;
                        bottom: 20px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 220px;
                        display: flex;
                        justify-content: space-between;
                        button{
                            width: 100px;
                            height: 34px;
                            line-height: 34px;
                            border-radius: 6px;
                            font-size: 14px;
                            border: 1px solid #0066FF;
                            box-sizing: border-box;
                            outline: 0;
                            cursor: pointer;
                        }
                        .ok{
                            background: #0066FF;
                            color: #FFFFFF;
                        }
                        .no{
                            background: #E7F5FF;
                            color: #0066FF;
                        }
                    }
                }
            }
        }
    }
</style>

在要使用的页面中引入，注册，使用

<template>
    <div>
        <!--
        @click="Open"     用于触发CAlert的isShow，控制CAlert是否显示和隐藏
        -->
        <button @click="Open" type="danger">click Me</button>
        <!--
        :isShow="isShow"  用来控制CAlert的显示和隐藏
        title="我是标题"   用于弹窗的标题文字
        @Commit="Commit"  用于处理提交的逻辑
        @Cancel="Cancel"  用于处理取消的逻辑
        slot="content"    用于可以自定义内容
        -->
        <CAlert :isShow="isShow" title="我是标题" @Commit="Commit" @Cancel="Cancel">
            <div slot="content">
                <div class="test">自定义内容1</div> <!-- 测试使用，自定义时这一行删掉即可 -->
            </div>
        </CAlert>
    </div>
</template>
<script>
    import CAlert from "../components/CAlert";
    export default {
        data () {
            return {
                isShow: false
            }
        },
        components: {
            CAlert
        },
        methods: {
            Open () {
                this.isShow = true;
                console.log('Open');
            },
            Commit () {
                this.isShow = false;
                console.log('Commit');
            },
            Cancel () {
                this.isShow = false;
                console.log('Cancel');
            }
        }
    }
</script>
<style lang="scss">
    .test{
        width: 500px;
        height: 300px;
        background-color: #eee;
    }
</style>

结果