新增模态框组件

src/components/widgets/modal.vue

@@ -0,0 +1,104 @@
+<template>
+    <view class="modal-container" v-if="show">
+        <view class="modal-mask" @click="close"></view>
+        <view class="modal-content" :style="{ width: width }">
+            <view class="modal-title">
+                <text class="title">
+                    {{ title }}
+                </text>
+                <text class="iconfont icon-guanbi close" @click="close"></text>
+            </view>
+            <view class="content-box">
+                <slot></slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "widgets-modal",
+    data() {
+        return {};
+    },
+    props: {
+        show: {
+            type: Boolean,
+            default: false,
+        },
+        title: {
+            type: String,
+            default: "默认标题",
+        },
+        width: {
+            type: String,
+            default: "650rpx",
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {
+        close() {
+            this.$emit("close");
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.modal-container {
+    z-index: 25;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    max-width: 750px;
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .modal-mask {
+        z-index: 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: #000000;
+        opacity: 0.2;
+    }
+    .modal-content {
+        z-index: 5;
+        position: relative;
+        padding: 30rpx 50rpx;
+        box-sizing: border-box;
+        background-color: #fff;
+    }
+    .modal-title {
+        text-align: center;
+        line-height: 0;
+        padding-bottom: 15px;
+        border-bottom: 4rpx solid #e0e0e0;
+        .title {
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #7286f1;
+            line-height: 32rpx;
+        }
+        .close {
+            position: absolute;
+            top: 20rpx;
+            right: 20rpx;
+            font-size: 30rpx;
+            line-height: 30rpx;
+        }
+    }
+    .content-box {
+        padding-top: 15rpx;
+    }
+}
+</style>