feat: update toast doc

docs/build/1.js

@@ -1 +1 @@
-webpackJsonp([1],{238:function(t,e,a){a(442);var i=a(0)(a(252),a(388),null,null);t.exports=i.exports},252:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(25),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},298:function(t,e,a){e=t.exports=a(15)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},388:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},442:function(t,e,a){var i=a(298);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(26)("1517d9c0",i,!0)}});
+webpackJsonp([1],{234:function(t,e,a){a(438);var i=a(0)(a(248),a(384),null,null);t.exports=i.exports},248:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(26),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},294:function(t,e,a){e=t.exports=a(15)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},384:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},438:function(t,e,a){var i=a(294);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(27)("1517d9c0",i,!0)}});

docs/examples-docs/toast.md

@@ -62,5 +62,5 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| title | 标题 | String  | '' |   |
+| type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'failure'  |
-| message | 内容 | String  | '' |   |
+| message | 内容 | String  | '' | - |

packages/toast/src/toast.js

@@ -1,12 +1,12 @@
 import Vue from 'vue';
 
 const ToastConstructor = Vue.extend(require('./toast.vue'));
-let toastPool = [];
+let toastQueue = [];
 
 let getInstance = () => {
-  if (toastPool.length > 0) {
+  if (toastQueue.length > 0) {
-    let instance = toastPool[0];
+    let instance = toastQueue[0];
-    toastPool.splice(0, 1);
+    toastQueue.splice(0, 1);
     return instance;
   }
   return new ToastConstructor({
@@ -16,7 +16,7 @@ let getInstance = () => {
 
 const returnInstance = instance => {
   if (instance) {
-    toastPool.push(instance);
+    toastQueue.push(instance);
   }
 };
 
@@ -31,6 +31,7 @@ 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';
@@ -40,20 +41,15 @@ var Toast = (options = {}) => {
   Vue.nextTick(function() {
     instance.visible = true;
     instance.$el.removeEventListener('transitionend', removeDom);
+    
     instance.timer = setTimeout(function() {
       if (instance.closed) return;
-      instance.close();
+      instance.visible = false;
+      instance.$el.addEventListener('transitionend', removeDom);
+      instance.closed = true;
     }, duration);
   });
   return instance;
 };
 
-
-Toast.close = function() {
-  this.visible = false;
-  this.$el.addEventListener('transitionend', removeDom);
-  this.closed = true;
-  returnInstance(this);
-};
-
 export default Toast;

packages/toast/src/toast.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="zan-toast">
-    <div class="zan-toast" :class="['zan-toast' + displayStyle]" v-show="visible">
+    <div class="zan-toast" :class="['zan-toast--' + displayStyle]" v-show="visible">
       <!-- 只显示文字 -->
       <template v-if="displayStyle === 'text'" >
         <div class="zan-toast__text">{{message}}</div>
@@ -10,8 +10,8 @@
           <zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
       </template>
       <!-- 图案加文字 -->
-      <template v-if="displayStyle === 'iconPlusText'">
+      <template v-if="displayStyle === 'default'">
-        <zan-cell class="zan-toast__icon":name="check"></zan-cell>
+        <zan-icon class="zan-toast__icon" name="check"></zan-icon>
         <div class="zan-toast__text">{{message}}</div>
       </template>
     </div>
@@ -19,21 +19,17 @@
 </template>
 
 <script>
-import zanLoading from 'packages/Loading';
+import zanLoading from 'packages/loading';
 import zanIcon from 'packages/icon';
 
-const TOAST_TYPE = ['text', 'loading', 'success', 'failure'];
+const TOAST_TYPES = ['text', 'loading', 'success', 'failure'];
 /**
  * zan-toast
- * @module components/switch
+ * @module components/toast
- * @desc 开关
+ * @desc toast
- * @param {boolean} [checked=false] - 开关状态
+ * @param {string} [type=false] - 类型
- * @param {boolean} [disabled=false] - 禁用
+ * @param {string} [message] - 信息
- * @param {boolean} [loading=false] - loading状态
- * @param {callback} [onChange] - 开关状态改变回调函数。
  *
- * @example
- * <zan-switch checked="true" disabled="false"></zan-switch>
  */
 export default {
   name: 'zan-toast',
@@ -45,7 +41,10 @@ export default {
   props: {
     type: {
       type: String,
-      default: false
+      default: 'text',
+      validate(value) {
+        return TOAST_TYPES.indexOf(value) > -1;
+      }
     },
     message: {
       type: String,
@@ -57,6 +56,11 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      visible: false
+    };
+  },
   computed: {
     displayStyle() {
       switch (this.type) {
@@ -65,7 +69,7 @@ export default {
         case 'loading':
           return 'loading';
         default:
-          return 'iconPlusText';
+          return 'default';
       }
     },
     iconName() {

packages/zanui-css/src/index.css

@@ -25,3 +25,4 @@
 @import './actionsheet.css';
 @import './quantity.css';
 @import './progress.css';
+@import './toast.css';

packages/zanui-css/src/toast.css

@@ -2,30 +2,34 @@
 
 @component-namespace zan {
   @b toast {
+    position: fixed;
     border-radius: 5px;
     background-color: #272727;
     opacity: 0.7;
     top: 50%;
     left: 50%;
     transform: translate3d(-50%, -50%, 0);
-    color: $white;
     font-size: 12px;
+    color: $c-white;
+    text-align: center;
 
     @m loading {
-      .zan-toast__icon {
+      padding: 45px;
-        top: 50%;
-        left: 50%;
-        transform: translate3d(-50%, -50%, 0);
-      }
     }
 
     @m text {
       padding: 11px;
     }
 
-    @m notify {
+    @m default {
+      width: 120px;
+      height: 120px;
       .zan-toast__icon {
         padding: 20px;
+        font-size: 36px;
+      }
+      .zan-toast__text {
+        padding-bottom: 20px;
       }
     }
   }