Merge branch 'hotfix/fix_toast_0330' into 'master'

feat: 简化toast为单个intance



See merge request !20

docs/examples-docs/toast.md

@@ -38,9 +38,9 @@ export default {
         type: 'success',
         message: leftSec.toString()
       });
-      window.setInterval(() => {
+      const id = window.setInterval(() => {
         if (leftSec <= 1) {
-          window.clearInterval();
+          window.clearInterval(id);
           toast.message = '跳转中...'
           return;
         }
@@ -106,9 +106,9 @@ export default {
         type: 'success',
         message: leftSec.toString()
       });
-      window.setInterval(() => {
+      const id = window.setInterval(() => {
         if (leftSec <= 1) {
-          window.clearInterval();
+          window.clearInterval(id);
           toast.message = '跳转中...'
           return;
         }
@@ -134,10 +134,10 @@ import { Toast } from 'src/index';
 export default {
   methods: {
     showToast() {
-      this.toast = Toast('我是提示文案，建议不超过十五字~');
+      Toast('我是提示文案，建议不超过十五字~');
     },
     closeToast() {
-      this.toast.clear();
+      Toast.clear();
     }
   }
 };
@@ -212,5 +212,5 @@ export default {
 | forbidClick | 不允许背景点击 | Boolean  | false | true, false|
 | duration | 时长(ms) | Number  | 3000ms | -|
 
-### instanceOfToast.clear()
+### Toast.clear()
 关闭toast。

packages/toast/src/toast.js

@@ -2,24 +2,17 @@ import Vue from 'vue';
 import merge from 'src/utils/merge';
 
 const ToastConstructor = Vue.extend(require('./toast.vue'));
-let toastQueue = [];
+let instance;
 
 const getInstance = () => {
-  if (toastQueue.length > 0) {
-    const instance = toastQueue[0];
-    toastQueue.splice(0, 1);
-    return instance;
-  }
-  return new ToastConstructor({
+  if (instance) instance.clear();
+
+  instance = new ToastConstructor({
     el: document.createElement('div')
   });
+  return instance;
 };
 
-const returnInstance = instance => {
-  if (instance) {
-    toastQueue.push(instance);
-  }
-};
 
 const removeDom = event => {
   if (event.target.parentNode) {
@@ -31,7 +24,6 @@ var Toast = (options = {}) => {
   const duration = options.duration || 3000;
 
   let instance = getInstance();
-  returnInstance(instance);
   instance.closed = false;
   clearTimeout(instance.timer);
   instance.type = options.type ? options.type : 'text';
@@ -77,4 +69,8 @@ Toast.fail = (options) => {
   }, options));
 };
 
+Toast.clear = () => {
+  if (instance) instance.clear();
+}
+
 export default Toast;

packages/toast/src/toast.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="zan-toast">
+  <transition name="zan-toast-fade">
     <div class="zan-toast-wrapper" v-show="visible">
       <div class="zan-toast" :class="['zan-toast--' + displayStyle]">
         <!-- 只显示文字 -->

packages/zanui-css/src/toast.css

@@ -44,9 +44,13 @@
       }
 
       .zan-toast__text {
-        padding-bottom: 20px;
+        padding: 15px 0 20px;
         font-size: 14px;
       }
     }
   }
 }
+
+.zan-toast-fade-enter, .zan-toast-fade-leave-active {
+  opacity: 0;
+}