| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 | 
							- <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>
 
 
  |