<template> <u-mask class="commonModal" :show="isShow" :mask-click-able="false" z-index="999998"> <view class="modal-con"> <u-icon v-if="isClose" @click="isShow=false" class="close-icon" name="close-circle" size="40" color="#999"></u-icon> <view class="modal-title" v-if="showTitle">{{title}}</view> <view class="modal-main"> {{content}} <slot></slot> </view> <view class="modal-footer"> <view class="button-cancel" v-if="isCancel" @click="handleCancel">{{cancelText}}</view> <view class="button-confirm" @click="handleConfirm">{{confirmText}}</view> </view> </view> </u-mask> </template> <script> export default { props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, title: { // 标题 type: String, default: '提示' }, content: { // 内容 type: String, default: '' }, isCancel: { // 是否有取消按钮 type: Boolean, default: true }, isClose: { // 是否有关闭按钮 type: Boolean, default: false }, confirmText: { // 确认按钮内容 type: String, default: '确认' }, cancelText: { // 取消按钮内容 type: String, default: '取消' }, showTitle:{ // 是否显示标题 type: Boolean, default: true }, }, data() { return { isShow: this.openModal, // 是否打开弹框 } }, methods: { // 确认 handleConfirm(){ this.$emit('confirm') }, // 取消 handleCancel(){ this.isShow = false this.$emit('cancel') } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') } } } } </script> <style lang="scss"> .commonModal{ width: 100%; height: 100vh; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; .modal-con{ width: 70%; background-color: #fff; border-radius: 24upx; position: relative; .close-icon{ position: absolute; right: 6upx; top: 6upx; } .modal-title{ text-align: center; font-size: 30upx; color: #000; padding: 30upx 30upx 0; } .modal-main{ text-align: center; font-size: 28upx; color: #222; line-height: 1.5em; padding: 30upx 30upx 40upx; } .modal-footer{ font-size: 30upx; display: flex; justify-content: space-between; align-items: center; text-align: center; border-top: 1upx solid #E5E5E5; .button-cancel{ color: #999; border-right: 1upx solid #E5E5E5; flex-grow: 1; padding: 20upx 0; width: 50%; } .button-confirm{ color: #2A86F4; flex-grow: 1; padding: 20upx 0; width: 50%; } } } } </style>