Browse Source

通用弹框

chenrui 3 years ago
parent
commit
7c50e630ae
1 changed files with 35 additions and 19 deletions
  1. 35 19
      src/views/common/commonModal.vue

+ 35 - 19
src/views/common/auditModal.vue → src/views/common/commonModal.vue

@@ -1,23 +1,23 @@
 <template>
   <a-modal
     centered
-    class="audit-modal"
+    class="common-modal"
     :footer="null"
     :maskClosable="false"
     v-model="isShow"
     @cancle="isShow=false"
     :width="416">
     <a-spin :spinning="spinning" tip="Loading...">
-      <div class="audit-main">
+      <div class="common-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">请点击下方按钮确认操作?</p>
+        <div class="common-cont">
+          <p class="common-tit">提示</p>
+          <p class="common-txt">{{ content }}</p>
         </div>
       </div>
       <div class="btn-box">
-        <a-button type="primary" class="button-error" @click="handleAuditFail">审核不通过</a-button>
-        <a-button type="primary" class="button-info" @click="handleAuditOk">审核通过</a-button>
+        <a-button type="primary" class="button-warning" @click="handleCommonFail" v-if="isCancel">{{ cancelText }}</a-button>
+        <a-button type="primary" class="button-info" @click="handleCommonOk">{{ okText }}</a-button>
       </div>
     </a-spin>
   </a-modal>
@@ -25,12 +25,28 @@
 
 <script>
 export default {
-  name: 'AuditModal',
+  name: 'CommonModal',
   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
@@ -42,12 +58,12 @@ export default {
     }
   },
   methods: {
-    // 审核通过
-    handleAuditOk () {
+    // 确定
+    handleCommonOk () {
       this.$emit('ok')
     },
-    // 审核不通过
-    handleAuditFail () {
+    // 取消
+    handleCommonFail () {
       this.$emit('fail')
     }
   },
@@ -67,23 +83,23 @@ export default {
 </script>
 
 <style lang="less">
-  .audit-modal{
+  .common-modal{
     .ant-modal-body{
       padding: 32px 32px 24px;
     }
-    .audit-main{
+    .common-main{
       display: flex;
-      .audit-cont{
-        .audit-tit{
-          color: rgba(0, 0, 0, 0.85);
+      .common-cont{
+        .common-tit{
+          color: rgba(0, 0, 0);
           font-weight: 500;
           font-size: 16px;
           line-height: 1.4;
           margin: 0;
         }
-        .audit-txt{
+        .common-txt{
           margin: 8px 0 0;
-          color: rgba(0, 0, 0, 0.65);
+          color: rgba(0, 0, 0);
           font-size: 14px;
           line-height: 1.5;
         }