<template> <a-modal centered v-drag class="common-modal" :footer="null" :maskClosable="false" v-model="isShow" :title="modalTit" :bodyStyle="bodyPadding?{padding:bodyPadding,background:'#f8f8f8'}:{padding: modalTit?'25px 32px 20px':'50px 32px 15px',background:'#f8f8f8'}" @cancel="isShow=false" :width="width"> <a-spin :spinning="spinning" tip="Loading..."> <div class="common-main" v-html="modalHtml"></div> <slot></slot> <div class="btn-box" v-if="showFooter"> <a-button @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button> <a-button type="primary" @click="handleCommonOk">{{ okText }}</a-button> </div> </a-spin> </a-modal> </template> <script> export default { name: 'CommonModal', props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, width: { type: String, default: '500px' }, 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 }, bodyPadding: { type: String, default: '' }, showFooter: { type: Boolean, default: true } }, 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('cancel') } } } } </script> <style lang="less"> .common-modal{ .common-main{ display: flex; line-height: 20px; .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: center; margin-top: 30px; .ant-btn{ margin:0 10px; } } } </style>