封装组件之---弹框封装

通用的弹框组件封装：

// 弹窗
<template>
    <div class="modal shdialog" v-show="show">
        <div class="modal-content rowflex" :style="{width: w, height: h}">
            <div class="title size28">{{title}}</div>
            <slot name="content"></slot>
            <!-- 底部按钮 -->
            <div class="footer row-center" v-if="showfooter">
                <div class="row-around btnarea">
                    <el-button
                        type="primary"
                        plain
                        v-if="showbtn1"
                        @click="clickbtn1"
                        size="mini"
                    >{{btn1}}</el-button>
                    <el-button
                        type="primary"
                        v-if="showbtn2"
                        @click="clickbtn2"
                        class="ml46"
                        size="mini"
                    >{{btn2}}</el-button>
                </div>
            </div>
            <slot name="foot" v-else></slot>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: false
        };
    },
    props: {
        //标题
        title: {
            type: String,
            default: "加载中..."
        },
        // content的宽
        w: {
            type: String,
            default: "8rem"
        },
        // content的高
        h: {
            type: String,
            default: "6rem"
        },
        // 是否显示footer
        showfooter: {
            type: Boolean,
            default: true
        },
        // 确认按钮的文本
        btn1: {
            type: String,
            default: "取 消"
        },
        // 是否显示确认按钮
        showbtn1: {
            type: Boolean,
            default: true
        },
        // 取消按钮的文本
        btn2: {
            type: String,
            default: "确 定"
        },
        // 是否显示取消按钮
        showbtn2: {
            type: Boolean,
            default: true
        },
        // 是否显示
        visible: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        visible(newVal) {
            this.show = newVal;
        }
    },
    methods: {
        // 点击按钮1
        clickbtn1() {
            this.show = false;
            this.$emit("onbtnone");
        },
        // 点击按钮2
        clickbtn2() {
            this.show = false;
            this.$emit("onbtntwo");
        }
    }
};
</script>

<style lang="scss" scoped>
.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(2, 24, 32, 0.69);
    z-index: 999;
    .rowflex {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .modal-content {
        padding: 0 0.36rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8rem;
        height: 6rem;
        border-radius: 0.08rem;
        background: #ffffff;
        .title {
            text-align: left;
            line-height: 0.88rem;
            font-weight: bold;
            color: $primary;
            height: 0.88rem;
            border-bottom: 0.01rem solid rgba(229, 229, 231, 1);
        }
        .footer {
            height: 0.88rem;
            border-top: 0.01rem solid rgba(229, 229, 231, 1);
            .btnarea {
                width: 2.72rem;
            }
        }
    }
}
</style>