vdesign-ui 0.2.7 → 0.2.9

package/dist/components/toast/index.js

@@ -2,82 +2,85 @@ import Vue from 'vue';
 import ToastComponent from './index.vue';
 import { inBrowser } from '../utils/env';
 
-let timer = null;
-let currentToast = null;
+let queueResult = []
+
+function getType(value) {
+  if (value !== value) return 'NaN';
+  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
+}
 
 class VdToast extends Vue.extend(ToastComponent) {
   constructor(options) {
     super();
-
     this.vm = this.$mount();
 
-    // 支持字符串或对象传入
+    this.timer = null
+
+    // 判断传入的 options 类型，并进行赋值
     if (typeof options === 'string' || typeof options === 'number') {
       this.message = options;
-    } else if (typeof options === 'object') {
+    } else if (getType(options) === 'object') {
+      this.message = options.message || '';
+      this.duration = options.duration || 1500;
       Object.assign(this, options);
     }
 
     this.init();
   }
 
+  /**
+   * 初始化方法
+   */
   init() {
     if (inBrowser) {
-      document.body.appendChild(this.vm.$el);
-      this.start();
+      document.body.appendChild(this.vm.$el)
+      this.start()
     }
   }
 
   start() {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      this.isShow = true;
-
+    clearTimeout(this.timer)
+    /**
+     * 在挂载真实 DOM 树后显示过渡效果
+     */
+    setTimeout(() => {
+      this.isShow = true
       if (this.duration > 0) {
         this.end();
       }
-    }, 100);
+    }, 0)
   }
 
   end() {
-    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);
-    }
+    /**
+     * 关闭过渡效果之后移除真实 DOM 树节点
+     */
+    this.timer = setTimeout(() => {
+      this.clear()
+    }, this.duration)
   }
 
   clear() {
-    this.isShow = false;
-    clearTimeout(timer);
-    // 检查元素是否仍在 DOM 中
-    if (inBrowser && document.body.contains(this.vm.$el)) {
-      document.body.removeChild(this.vm.$el);
+    this.isShow = false
+    if (inBrowser && this.vm.$el) {
+      setTimeout(() => {
+        this.vm.$el.parentNode && this.vm.$el.parentNode.removeChild(this.vm.$el);
+      }, 500)
     }
   }
 }
 
-// 创建静态方法以支持直接调用
-const showToast = options => {
-  currentToast && currentToast.clear(); // 清除现有的 toast
-  currentToast = new VdToast(options); // 创建新的 toast 实例
-  return currentToast;
-};
-
-// 添加静态方法，支持手动清除
-showToast.clear = () => {
-  currentToast && currentToast.clear();
-  currentToast = null;
-};
+const Toast = (options) => {
+  const NewOption = new VdToast(options)
+  queueResult.push(NewOption)
+  return NewOption
+}
 
-// 在 Vue 的原型上挂载，方便全局调用
-Vue.prototype.$VdToast = showToast;
+Toast.clear = () => {
+  queueResult.forEach(toast => {
+    toast.clear()
+  })
+  queueResult = [];
+}
 
-export default showToast;
+export default Toast

package/dist/components/toast/style.less

@@ -10,8 +10,9 @@
   box-sizing: border-box;
   text-align: center;
   z-index: 1000;
-  transition: opacity .3s linear;
+  transition: all .3s linear;
   opacity: 0;
+  visibility: hidden;
   // token
   min-width: var(--width-toast-small);
   max-width: var(--width-toast-large);
@@ -24,6 +25,7 @@
 
   &.vd-toast-show {
     opacity: 1;
+    visibility: visible;
   }
 
   &-icon {

package/dist/components/utils/env.js

@@ -1,2 +1,21 @@
-// env.js
+import Vue from 'vue';
+
 export const inBrowser = typeof window !== 'undefined';
+
+export const isServer = Vue.prototype.$isServer;
+
+export function isObject(val) {
+  return val !== null && typeof val === 'object';
+}
+
+export function isInDocument(element) {
+  return document.body.contains(element);
+}
+
+export function removeNode(el) {
+  const parent = el.parentNode;
+
+  if (parent) {
+    parent.removeChild(el);
+  }
+}