feat: toast update

packages/toast/src/toast.js

@@ -36,16 +36,20 @@ var Toast = (options = {}) => {
   clearTimeout(instance.timer);
   instance.type = options.type ? options.type : 'text';
   instance.message = typeof options === 'string' ? options : options.message;
+  instance.forbidClick = options.forbidClick ? options.forbidClick : false;
+  instance.clear = () => {
+    if (instance.closed) return;
+    instance.visible = false;
+    instance.$el.addEventListener('transitionend', removeDom);
+    instance.closed = true;
+  };
 
   document.body.appendChild(instance.$el);
   Vue.nextTick(function() {
     instance.visible = true;
     instance.$el.removeEventListener('transitionend', removeDom);
     instance.timer = setTimeout(function() {
-      if (instance.closed) return;
-      instance.visible = false;
-      instance.$el.addEventListener('transitionend', removeDom);
-      instance.closed = true;
+      instance.clear();
     }, duration);
   });
   return instance;

packages/toast/src/toast.vue

@@ -1,19 +1,22 @@
 <template>
   <transition name="zan-toast">
-    <div class="zan-toast" :class="['zan-toast--' + displayStyle]" v-show="visible">
-      <!-- 只显示文字 -->
-      <template v-if="displayStyle === 'text'" >
-        <div class="zan-toast__text">{{message}}</div>
-      </template>
-      <!-- 加载中 -->
-      <template v-if="displayStyle === 'loading'">
-          <zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
-      </template>
-      <!-- 图案加文字 -->
-      <template v-if="displayStyle === 'default'">
-        <zan-icon class="zan-toast__icon" name="check"></zan-icon>
-        <div class="zan-toast__text">{{message}}</div>
-      </template>
+    <div class="zan-toast-wrapper" v-show="visible">
+      <div class="zan-toast" :class="['zan-toast--' + displayStyle]">
+        <!-- 只显示文字 -->
+        <template v-if="displayStyle === 'text'" >
+          <div class="zan-toast__text">{{message}}</div>
+        </template>
+        <!-- 加载中 -->
+        <template v-if="displayStyle === 'loading'">
+            <zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
+        </template>
+        <!-- 图案加文字 -->
+        <template v-if="displayStyle === 'default'">
+          <zan-icon class="zan-toast__icon" :name="type"></zan-icon>
+          <div class="zan-toast__text">{{message}}</div>
+        </template>
+      </div>
+      <div class="zan-toast__overlay" v-if="forbidClick"></div>
     </div>
   </transition>
 </template>
@@ -54,6 +57,10 @@ export default {
           return value.length <= 16;
         }
       }
+    },
+    forbidClick: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -71,10 +78,6 @@ export default {
         default:
           return 'default';
       }
-    },
-    iconName() {
-      // TODO: 更新icon
-      return 'check';
     }
   }
 };

packages/zanui-css/src/toast.css

@@ -3,7 +3,7 @@
 @component-namespace zan {
   @b toast {
     position: fixed;
-    z-index: 3000;
+    z-index: 3001;
     border-radius: 5px;
     background-color: #272727;
     opacity: .7;
@@ -13,6 +13,17 @@
     font-size: 12px;
     color: $c-white;
     text-align: center;
+    line-height: 12px;
+
+    @e overlay {
+      position: fixed;
+      left: 0;
+      top: 0;
+      background: transparent;
+      height: 100vh;
+      width: 100vh;
+      z-index: 3000;
+    }
 
     @m loading {
       padding: 45px;
@@ -26,12 +37,15 @@
     @m default {
       width: 120px;
       height: 120px;
+
       .zan-toast__icon {
-        padding: 20px;
-        font-size: 36px;
+        padding-top: 20px;
+        font-size: 50px;
       }
+
       .zan-toast__text {
         padding-bottom: 20px;
+        font-size: 14px;
       }
     }
   }