Browse Source

fix: toast add props

yangkaixuan 5 years ago
parent
commit
c1e6ee0f39
2 changed files with 16 additions and 9 deletions
  1. 4 1
      src/packages/toast/doc.md
  2. 12 8
      src/packages/toast/toast.vue

+ 4 - 1
src/packages/toast/doc.md

@@ -164,9 +164,12 @@ Toast.resetDefaultOptions("text");
 | bgColor             | 背景颜色(透明度)                                                            | String        | "rgba(46, 46, 46, 0.7)"       |
 | customClass         | 自定义类名                                                                    | String        | ""                            |
 | icon                | 自定义图标,**支持图片链接或base64格式**                                        | String        | ""                            |
-| size                | 尺寸,**small**/**base**/**large**三选一                                                  | String        | "base"                        |
+| size                | 文案尺寸,**small**/**base**/**large**三选一                                                  | String        | "base"                        |
 | cover               | 是否显示遮罩层,loading类型默认显示                                           | Boolean       | loading类型true/其他类型false |
 | coverColor          | 遮罩层颜色,默认透明                                                          | String        | "rgba(0,0,0,0)"               |
 | loadingRotate       | loading图标是否旋转,仅对loading类型生效                                      | Boolean       | true                          |
 | onClose             | 关闭时触发的事件                                                              | function      | null                          |
 | closeOnClickOverlay | 是否在点击遮罩层后关闭提示                                                    | Boolean       | false                         |
+| coverStyle          | 遮罩层style                                                        | object       | {}                         |
+| coverClass          | 遮罩层class                                                        | String       | ""                         |
+

+ 12 - 8
src/packages/toast/toast.vue

@@ -6,15 +6,17 @@
       v-if="visible"
       :style="{
         bottom: center ? 'auto' : bottom + 'px',
-        'background-color': coverColor
+        'background-color': coverColor,
       }"
       @click="clickCover"
     >
       <div
         class="nut-toast-inner"
+        :class="coverClass"
         :style="{
           'text-align': textAlignCenter ? 'center' : 'left',
-          'background-color': bgColor
+          'background-color': bgColor,
+          ...coverStyle,
         }"
       >
         <span v-if="hasIcon" class="nut-toast-icon-wrapper">
@@ -52,8 +54,10 @@ export default {
       textTimer: null,
       cover: false,
       coverColor: 'rgba(0, 0, 0, 0)',
+      coverStyle: {},
+      coverClass: '',
       timeStamp: null,
-      closeOnClickOverlay: false
+      closeOnClickOverlay: false,
     };
   },
   watch: {
@@ -61,7 +65,7 @@ export default {
       if (val) {
         this.show();
       }
-    }
+    },
   },
   computed: {
     cusIcon() {
@@ -75,7 +79,7 @@ export default {
         { 'nut-toast-cover': this.cover },
         { 'nut-loading': this.type == 'loading' },
         this.customClass,
-        'nut-toast-' + this.size
+        'nut-toast-' + this.size,
       ];
     },
     hasIcon() {
@@ -84,7 +88,7 @@ export default {
       } else {
         return this.cusIcon;
       }
-    }
+    },
   },
   methods: {
     show(force) {
@@ -119,11 +123,11 @@ export default {
       if (this.closeOnClickOverlay) {
         this.hide();
       }
-    }
+    },
   },
   destroyed() {
     this.textTimer = null;
     this.timer = null;
-  }
+  },
 };
 </script>