feat: add toast

packages/toast/src/toast.js

@@ -0,0 +1,59 @@
+import Vue from 'vue';
+
+const ToastConstructor = Vue.extend(require('./toast.vue'));
+let toastPool = [];
+
+let getInstance = () => {
+  if (toastPool.length > 0) {
+    let instance = toastPool[0];
+    toastPool.splice(0, 1);
+    return instance;
+  }
+  return new ToastConstructor({
+    el: document.createElement('div')
+  });
+};
+
+const returnInstance = instance => {
+  if (instance) {
+    toastPool.push(instance);
+  }
+};
+
+const removeDom = event => {
+  if (event.target.parentNode) {
+    event.target.parentNode.removeChild(event.target);
+  }
+};
+
+
+var Toast = (options = {}) => {
+  const duration = options.duration || 3000;
+
+  let instance = getInstance();
+  instance.closed = false;
+  clearTimeout(instance.timer);
+  instance.type = options.type ? options.type : 'text';
+  instance.message = typeof options === 'string' ? options : options.message;
+
+  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.close();
+    }, 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

@@ -0,0 +1,77 @@
+<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 === 'iconPlusText'">
+        <zan-cell class="zan-toast__icon":name="check"></zan-cell>
+        <div class="zan-toast__text">{{message}}</div>
+      </template>
+    </div>
+  </transition>
+</template>
+
+<script>
+import zanLoading from 'packages/Loading';
+import zanIcon from 'packages/icon';
+
+const TOAST_TYPE = ['text', 'loading', 'success', 'failure'];
+/**
+ * zan-toast
+ * @module components/switch
+ * @desc 开关
+ * @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>
+ */
+export default {
+  name: 'zan-toast',
+
+  components: {
+    'zan-loading': zanLoading,
+    'zan-icon': zanIcon
+  },
+  props: {
+    type: {
+      type: String,
+      default: false
+    },
+    message: {
+      type: String,
+      default: '',
+      validate(value) {
+        if (this.type === 'success' || this.type === 'failure') {
+          return value.length <= 16;
+        }
+      }
+    }
+  },
+  computed: {
+    displayStyle() {
+      switch (this.type) {
+        case 'text':
+          return 'text';
+        case 'loading':
+          return 'loading';
+        default:
+          return 'iconPlusText';
+      }
+    },
+    iconName() {
+      // TODO: 更新icon
+      return 'check';
+    }
+  }
+};
+</script>