vdesign-ui 0.2.5 → 0.2.7

package/dist/components/toast/index.js

@@ -1,94 +1,83 @@
-import Vue from 'vue'
-import VdToast from './index.vue'
+import Vue from 'vue';
+import ToastComponent from './index.vue';
 import { inBrowser } from '../utils/env';
 
-let timer = null
+let timer = null;
+let currentToast = null;
 
-/**
- * 使用新类继承 VUE 扩展组件
- */
-class Toast extends Vue.extend(VdToast) {
+class VdToast extends Vue.extend(ToastComponent) {
   constructor(options) {
-    super()
-    const type = Object.prototype.toString.call(options)
-    /**
-     * 赋值虚拟节点
-     */
-    this.vm = this.$mount()
-    /**
-     * 判断 options 类型
-     */
-    if (type === '[object String]' || type === '[object Number]') {
-      this.message = options
-    } else if (type === '[object Object]') {
-      /**
-       * 循环遍历，设置该类属性
-       */
-      Object.keys(options).forEach(elem => {
-        this[elem] = options[elem]
-      })
-    } else {
-      /**
-       * 抛出错误
-       */
-      throw new Error(`${JSON.stringify(options)} is not Number, String or Object`)
-    }
+    super();
+
+    this.vm = this.$mount();
 
-    // // 设置具名插槽内容
-    // if (options.slotContent) {
-    //   const slotContent = options.slotContent;
-    //   this.$slots.icon = slotContent.icon ? [this.$createElement('div', { domProps: { innerHTML: slotContent.icon } })] : [];
-    //   this.$slots.content = slotContent.content ? [this.$createElement('div', { domProps: { innerHTML: slotContent.content } })] : [];
-    // }
+    // 支持字符串或对象传入
+    if (typeof options === 'string' || typeof options === 'number') {
+      this.message = options;
+    } else if (typeof options === 'object') {
+      Object.assign(this, options);
+    }
 
-    this.init()
+    this.init();
   }
 
-  /**
-   * 初始化方法
-   */
   init() {
-    /**
-     * 把虚拟 DOM 插入到真实 DOM 树中
-     */
     if (inBrowser) {
-      document.body.appendChild(this.vm.$el) // 将虚拟 DOM 插入真实 DOM
-      this.start()
+      document.body.appendChild(this.vm.$el);
+      this.start();
     }
   }
 
-  /**
-   * 开始此组件
-   */
   start() {
-    clearTimeout(timer)
-    /**
-     * 在挂载真实 DOM 树后显示过渡效果
-     */
+    clearTimeout(timer);
     timer = setTimeout(() => {
-      this.isShow = true
-      this.end()
-    }, 100)
+      this.isShow = true;
+
+      if (this.duration > 0) {
+        this.end();
+      }
+    }, 100);
   }
 
-  /**
-   * 结束此组件
-   */
   end() {
-    /**
-     * 关闭过渡效果之后移除真实 DOM 树节点
-     */
-    setTimeout(() => {
-      this.isShow = false
-      setTimeout(() => {
-        if (inBrowser) {
-          document.body.removeChild(this.vm.$el)
-        }
-      }, 500)
-    }, this.duration)
+    clearTimeout(timer);
+    if (this.duration > 0) {
+      timer = setTimeout(() => {
+        this.isShow = false;
+        setTimeout(() => {
+          // 检查元素是否仍在 DOM 中
+          if (inBrowser && document.body.contains(this.vm.$el)) {
+            document.body.removeChild(this.vm.$el);
+          }
+        }, 500);
+      }, this.duration);
+    }
+  }
+
+  clear() {
+    this.isShow = false;
+    clearTimeout(timer);
+    // 检查元素是否仍在 DOM 中
+    if (inBrowser && document.body.contains(this.vm.$el)) {
+      document.body.removeChild(this.vm.$el);
+    }
   }
 }
 
-const GetToast = options => new Toast(options)
+// 创建静态方法以支持直接调用
+const showToast = options => {
+  currentToast && currentToast.clear(); // 清除现有的 toast
+  currentToast = new VdToast(options); // 创建新的 toast 实例
+  return currentToast;
+};
+
+// 添加静态方法，支持手动清除
+showToast.clear = () => {
+  currentToast && currentToast.clear();
+  currentToast = null;
+};
+
+// 在 Vue 的原型上挂载，方便全局调用
+Vue.prototype.$VdToast = showToast;
 
-export default GetToast
+export default showToast;