feat: update toast&switch

docs/examples-docs/switch.md

@@ -16,6 +16,25 @@
   }
 </style>
 
+<script>
+export default {
+  data() {
+    return {
+      switchState: true
+    };
+  },
+  computed: {
+    switchStateText() {
+      return this.switchState ? ' ON' : 'OFF';
+    }
+  },
+  methods: {
+    updateState(newState) {
+      this.switchState = newState;
+    }
+  }
+};  
+</script>
 
 ## Switch组件
 
@@ -24,7 +43,7 @@
 :::demo 基础用法
 ```html
 <div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
+  <zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
   <div class="demo-switch__text">{{switchStateText}}</div>
 </div>
 <div class="demo-switch__wrapper">
@@ -73,4 +92,3 @@ export default {
 | checked | 开关状态 | boolean  | false          | true, false    |
 | loading | loading状态 | boolean  | false          | true, false    |
 | disabled | 禁用状态 | boolean  | false          | true, false    |
-| onChange | 回调 | function  | function（）{}      | -    |

docs/examples-docs/toast.md

@@ -16,11 +16,30 @@ export default {
     showSimpleToast() {
       Toast('我是提示文案，建议不超过十五字~');
     },
-    showToast(type) {
-      Toast({
-        type: type,
-        message: '文案信息'
-      })
+    showLoadingToast() {
+      Toast.loading();
+    },
+    showSuccessToast() {
+      Toast.success('成功文案');
+    },
+    showFailToast() {
+      Toast.fail('失败文案');
+    },
+    showCustomizedToast(duration) {
+      let leftSec = duration / 1000;
+      let toast = Toast({
+        duration: duration + 1000,
+        type: 'success',
+        message: leftSec.toString()
+      });
+      window.setInterval(() => {
+        if (leftSec <= 1) {
+          window.clearInterval();
+          toast.message = '跳转中...'
+          return;
+        }
+        toast.message = (--leftSec).toString();
+      }, 1000);
     }
   }
 };
@@ -32,11 +51,11 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-button @click="showSimpleToast()">普通文字提示</zan-button>
-
-<zan-button @click="showToast('loading')">加载Toast</zan-button>
-<zan-button @click="showToast('success')">成功</zan-button>
-<zan-button @click="showToast('failure')">失败</zan-button>
+<zan-button @click="showSimpleToast">普通文字提示</zan-button>
+<zan-button @click="showLoadingToast">加载Toast</zan-button>
+<zan-button @click="showSuccessToast">成功</zan-button>
+<zan-button @click="showFailToast">失败</zan-button>
+<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
 
 <script>
 import { Toast } from 'src/index';
@@ -46,11 +65,30 @@ export default {
     showSimpleToast() {
       Toast('我是提示文案，建议不超过十五字~');
     },
-    showToast(type) {
-      Toast({
-        type: type,
-        message: '文案信息'
-      })
+    showLoadingToast() {
+      Toast.loading();
+    },
+    showSuccessToast() {
+      Toast.success('成功文案');
+    },
+    showFailToast() {
+      Toast.fail('失败文案');
+    },
+    showCustomizedToast(duration) {
+      let leftSec = duration / 1000;
+      let toast = Toast({
+        duration: duration + 1000,
+        type: 'success',
+        message: leftSec.toString()
+      });
+      window.setInterval(() => {
+        if (leftSec <= 1) {
+          window.clearInterval();
+          toast.message = '跳转中...'
+          return;
+        }
+        toast.message = (--leftSec).toString();
+      }, 1000);
     }
   }
 };
@@ -58,7 +96,6 @@ export default {
 ```
 :::
 
-
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |

packages/switch/src/switch.vue

@@ -15,7 +15,6 @@
  * @param {boolean} [checked=false] - 开关状态
  * @param {boolean} [disabled=false] - 禁用
  * @param {boolean} [loading=false] - loading状态
- * @param {callback} [onChange] - 开关状态改变回调函数。
  *
  * @example
  * <zan-switch checked="true" disabled="false"></zan-switch>
@@ -34,10 +33,6 @@ export default {
     loading: {
       type: Boolean,
       default: false
-    },
-    onChange: {
-      type: Function,
-      default: function() {}
     }
   },
   computed: {
@@ -54,7 +49,7 @@ export default {
      */
     toggleState: function() {
       if (this.disabled || this.loading) return;
-      this.onChange(!this.checked);
+      this.$emit('change', !this.checked);
     }
   }
 };

packages/toast/src/toast.js

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import merge from 'src/utils/merge';
 
 const ToastConstructor = Vue.extend(require('./toast.vue'));
 let toastQueue = [];
@@ -50,4 +51,26 @@ var Toast = (options = {}) => {
   return instance;
 };
 
+Toast.loading = (options) => {
+  return new Toast(merge({
+    type: 'loading'
+  }, options));
+};
+
+Toast.success = (options) => {
+  const message = typeof options === 'string' ? options : options.message;
+  return new Toast(merge({
+    type: 'success',
+    message: message
+  }, options));
+};
+
+Toast.fail = (options) => {
+  const message = typeof options === 'string' ? options : options.message;
+  return new Toast(merge({
+    type: 'fail',
+    message: message
+  }, options));
+};
+
 export default Toast;

packages/toast/src/toast.vue

@@ -22,7 +22,7 @@
 import zanLoading from 'packages/loading';
 import zanIcon from 'packages/icon';
 
-const TOAST_TYPES = ['text', 'loading', 'success', 'failure'];
+const TOAST_TYPES = ['text', 'loading', 'success', 'fail'];
 /**
  * zan-toast
  * @module components/toast
@@ -50,7 +50,7 @@ export default {
       type: String,
       default: '',
       validate(value) {
-        if (this.type === 'success' || this.type === 'failure') {
+        if (this.type === 'success' || this.type === 'fail') {
           return value.length <= 16;
         }
       }

packages/zanui-css/src/toast.css

@@ -19,7 +19,8 @@
     }
 
     @m text {
-      padding: 11px;
+      padding: 12px;
+      min-width: 200px;
     }
 
     @m default {