<template> <a-modal centered class="common-modal" :footer="null" :maskClosable="false" v-model="isShow" :title="modalTit" @cancle="isShow=false" :width="416"> <a-spin :spinning="spinning" tip="Loading..."> <div class="common-main" v-html="modalHtml"></div> <div class="btn-box"> <a-button type="primary" class="button-warning" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button> <a-button type="primary" class="button-info" @click="handleCommonOk">{{ okText }}</a-button> </div> </a-spin> </a-modal> </template> <script> export default { name: 'CommonModal', props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, modalTit: { // 弹框标题 type: String, default: null }, modalHtml: { type: String, default: '' }, okText: { // 确定 按钮文字 type: String, default: '确定' }, cancelText: { // 取消 按钮文字 type: String, default: '取消' }, isCancel: { // 是否显示 取消 按钮 type: Boolean, default: true }, spinning: { // 加载中 type: Boolean, default: false } }, data () { return { isShow: this.openModal // 是否打开弹框 } }, methods: { // 确定 handleCommonOk () { this.$emit('ok') }, // 取消 handleCommonCancel () { this.$emit('cancel') } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') } } } } </script> <style lang="less"> .common-modal{ .ant-modal-body{ padding: 32px 32px 24px; } .common-main{ display: flex; .common-cont{ .common-tit{ color: rgba(0, 0, 0); font-weight: 500; font-size: 16px; line-height: 1.4; margin: 0; } .common-txt{ margin: 8px 0 0; color: rgba(0, 0, 0); font-size: 14px; line-height: 1.5; } } } .btn-box{ text-align: right; margin-top: 24px; } } </style>