<template> <a-modal centered class="audit-modal" :footer="null" :maskClosable="false" v-model="isShow" @cancle="isShow=false" :width="416"> <a-spin :spinning="spinning" tip="Loading..."> <div class="audit-main"> <a-icon type="question-circle" style="color: #faad14;font-size: 22px;margin-right: 16px;" /> <div class="audit-cont"> <p class="audit-tit">提示</p> <p class="audit-txt">{{ content || '请点击下方按钮确认操作?' }}</p> </div> </div> <div class="btn-box"> <a-button type="primary" class="button-error" @click="handleAuditFail" v-if="isCancel">{{ cancelText || '审核不通过' }}</a-button> <a-button type="primary" class="button-info" @click="handleAuditOk">{{ okText || '审核通过' }}</a-button> </div> </a-spin> </a-modal> </template> <script> export default { name: 'AuditModal', props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, content: { 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: { // 审核通过 handleAuditOk () { this.$emit('ok') }, // 审核不通过 handleAuditFail () { this.$emit('fail') } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') } } } } </script> <style lang="less"> .audit-modal{ .ant-modal-body{ padding: 32px 32px 24px; } .audit-main{ display: flex; .audit-cont{ .audit-tit{ color: rgba(0, 0, 0); font-weight: 500; font-size: 16px; line-height: 1.4; margin: 0; } .audit-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>