模态框组件

@@ -6,6 +6,69 @@ import {
 
 
 export default {
+	props: {
+		// 是否显示组件
+		visible: {
+			type: Boolean,
+			default: true,
+		},
+		// 标题名称 需要再 assets/images/common/ 目录下添加图标
+		icon: {
+			type: String,
+			default: "succ",
+		},
+		// 标题，不建议使用
+		title: {
+			type: String,
+			default: "",
+		},
+		// 文案
+		content: {
+			type: String,
+			default: "",
+		},
+		// 确认文案
+		confirmText: {
+			type: String,
+			default: "確認",
+		},
+		// 取消文案
+		cancelText: {
+			type: String,
+			default: "取消",
+		},
+		// 是否显示确认按钮
+		showConfirm: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否显示取消按钮
+		showCancel: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否显示遮罩层
+		overlayShow: {
+			type: Boolean,
+			default: true,
+		},
+
+		// 确定按钮回调方法
+		confirm: {
+			type: Function,
+			default: null
+		},
+		// 取消按钮回调方法
+		cancel: {
+			type: Function,
+			default: null
+		},
+		// 点击蒙层回调方法
+		overlay: {
+			type: Function,
+			default: null
+		}
+	},
 	data() {
 		return {
 			key: 'value'
@@ -13,9 +76,26 @@ export default {
 	},
 	components: {},
 	methods: {
+		// 点击确认
+		onConfirmHandler() {
+			if (this.confirm) {
+				this.confirm();
+			}
+		},
+		// 点击取消
+		onCancelHandler() {
+			if (this.cancel) {
+				this.cancel();
+			}
+		},
+		// 点击蒙层
+		onOverLayHandler() {
+			if (this.overlay) {
+				this.overlay();
+			}
+		},
 		initData() {}
 	},
 	mounted() {},
-    created() {
-    }
+	created() {}
 }

 @import '@/styles/_support';
+
+.comp {
+  position: absolute;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  @extend .fcc;
+  text-align: center;
+}
+
+.overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba($color: #000000, $alpha: 0.7);
+}
+
+.modal {
+  position: relative;
+  @extend .bb;
+  width: 36rem;
+  min-height: 22.5rem;
+  border-radius: 1.25rem;
+  background-color: #ffffff;
+  padding: 4.5rem 2rem 2.5rem;
+
+  &-title {
+    margin-bottom: 3rem;
+    color: $cOrange;
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  &-icon-wrap {
+    @extend .fcc;
+  }
+
+  &-content {
+    color: $cOrange;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  &-btn-wrap {
+    display: flex;
+    justify-content: center;
+
+    .btn {
+      @include btc2(12rem, 3.6rem, 16px);
+      margin: 2rem 1rem 0;
+      @extend .pointer;
+    }
+  }
+}
+
+.hide{
+  display: none;
+}

 
 <template>
-	<div class="comp">
-		modal-comp
+	<div class="comp" :class="{'hide' : !visible }">
+		<div @click="onOverLayHandler()" class="overlay" v-if="overlayShow"></div>
+		<div class="modal">
+			<div v-if="title" class="modal-title">{{title}}</div>
+			<div class="modal-icon-wrap">
+				<img :src="require('@assets/images/common/icon-'+icon+'.png')">
+			</div>
+			<div class="modal-content">{{content}}</div>
+			<div class="modal-btn-wrap">
+				<div @click="onCancelHandler()" v-if="showCancel" class="btn">{{cancelText}}</div>
+				<div @click="onConfirmHandler()" v-if="showConfirm" class="btn">{{confirmText}}</div>
+			</div>
+		</div>
 	</div>
 </template>