提示模态框

手搓一个简单的模态框组件，记录下来，免得以后又得手搓(づ￣3￣)づ

父类使用

<showModal :modal="modal" :mask="modal" :title='title' :cantent='cantent' :cancelText='cancelText' :confirmText='confirmText' @closeModal="closeModal" @cancelBtn="cancelBtn" @confirmBtn="confirmBtn"></showModal>

HTML部分

<!-- 模态框 -->
        <view class="modal" v-show='modal'>
            <image src="https://admin.lubanketang.com/uploads/20230413/d03526ac67f53efebee46e0bdb44f0db.png" class="close" @click="closeModal"></image>
            <view class="main">
                <view class="title">
                    <!-- 标题 -->
                    {{title}}
                </view>
                <view class="cantent">
                    <!-- 内容 -->
                    {{cantent}}
                </view>
            </view>
            <view class="btn">
                <view class="cancelText" @click="cancelBtn">
                    <!-- 取消按钮 -->
                    {{cancelText}}
                </view>
                <view style="border-left: 2rpx solid #ececec;height: 100%;"></view>
                <view class="confirmText" @click="confirmBtn">
                    <!-- 确认按钮 -->
                    {{confirmText}}
                </view>
            </view>
        </view>
        <!-- 蒙版 -->
        <view v-show="mask" class="mask"></view>

js部分

props: {
            modal: { // 是否显示模态框
                type: Boolean,
            },
            mask: { // 是否显示蒙版
                type: Boolean,
            },
            title: String, // 标题
            cantent: String, // 内容
            cancelText: { // 左按钮
                type: String,
                default: '取消'
            },
            confirmText: { // 右按钮
                type: String,
                default: '确认'
            },
        },

methods: {
            /**
             * @description 右上角×关闭模态框
             * @author suxiaojun
             * @date 2023/04/14
             * */
            closeModal() {
                this.$emit('closeModal', false)
            },

            /**
             * @description 左按钮点击事件
             * @author suxiaojun
             * @date 2023/04/14
             * */
            cancelBtn() {
                this.$emit('cancelBtn', false)
            },

            /**
             * @description 右按钮点击事件
             * @author suxiaojun
             * @date 2023/04/14
             * */
            confirmBtn() {
                this.$emit('confirmBtn', false)
            },
        }

css部分

.modal {
        position: fixed;
        top: 50%;
        left: 50%;
        padding-top: 50rpx;
        width: 81%;
        transform: translate(-50%,-50%);
        border-radius: 25rpx;
        background-color: #fff;
        z-index: 3;

        .close {
            position: absolute;
            top: 10rpx;
            right: 10rpx;
            width: 40rpx;
            height: 40rpx;
        }

        .main {
            width: 100%;
            padding: 0 50rpx;
            box-sizing: border-box;

            .title {
                padding-bottom: 30rpx;
                font-size: 34rpx;
                font-weight: bold;
                text-align: center;
            }

            .cantent {
                font-size: 34rpx;
                color: #7f7f7f;
                text-align: center;
            }
        }

        .btn {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 60rpx;
            border-top: 2rpx solid #ececec;
            height: 115rpx;
            box-sizing: border-box;

            .cancelText,.confirmText {
                width: 50%;
                height: 115rpx;
                line-height: 115rpx;
                text-align: center;
                font-size: 34rpx;
                font-weight: bold;
            }

            .cancelText {
                color: #000000;
            }

            .confirmText {
                color: #576b95;
            }
        }
    }

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #2d2d2d;
        opacity: 0.7;
        z-index: 2;
    }