vdesign-ui 0.2.20 → 0.3.0

package/dist/components/popover/vue-popover.vue

@@ -1,314 +1,314 @@
-<template>
-  <component :is="tagName" :class="{ 'vd-popper-active': showPopper }">
-    <transition :name="transition" :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass"
-      @after-leave="doDestroy">
-      <span ref="popper" :class="rootClass" v-show="!disabled && showPopper">
-        <slot>{{ content }}</slot>
-      </span>
-    </transition>
-    <slot name="reference"></slot>
-  </component>
-</template>
-
-<script>
-// vue2 依赖 popper1.0，后期如果 vue3 则可升级 popper2.0
-import Popper from 'popper.js';
-
-function on(element, event, handler) {
-  if (element && event && handler) {
-    element.addEventListener(event, handler, false);
-  }
-}
-
-function off(element, event, handler) {
-  if (element && event) {
-    element.removeEventListener(event, handler, false);
-  }
-}
-
-export default {
-  // 定义了组件接收的属性，包括各种配置选项和默认值
-  props: {
-    tagName: {
-      type: String,
-      default: 'div',
-    },
-    trigger: {
-      type: String,
-      default: 'click',
-      validator: value => ['clickToOpen', 'click', 'clickToToggle', 'hover', 'focus'].includes(value)
-    },
-    delayOnMouseOver: {
-      type: Number,
-      default: 10,
-    },
-    delayOnMouseOut: {
-      type: Number,
-      default: 10,
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    content: String,
-    enterActiveClass: String,
-    leaveActiveClass: String,
-    boundariesSelector: String,
-    reference: {},
-    forceShow: {
-      type: Boolean,
-      default: false
-    },
-    dataValue: {
-      default: null,
-    },
-    appendToBody: {
-      type: Boolean,
-      default: false
-    },
-    visibleArrow: {
-      type: Boolean,
-      default: true
-    },
-    transition: {
-      type: String,
-      default: ''
-    },
-    stopPropagation: {
-      type: Boolean,
-      default: false
-    },
-    preventDefault: {
-      type: Boolean,
-      default: false
-    },
-    options: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    rootClass: {
-      type: String,
-      default: ''
-    }
-  },
-  // 定义组件的内部状态，包括 referenceElm, popperJS, showPopper 等
-  data() {
-    return {
-      referenceElm: null,
-      popperJS: null,
-      showPopper: false,
-      currentPlacement: '',
-      popperOptions: {
-        placement: 'bottom',
-        computeStyle: {
-          gpuAcceleration: false
-        }
-      }
-    };
-  },
-  // 监听 showPopper、forceShow 和 disabled
-  watch: {
-    showPopper(value) {
-      if (value) {
-        this.$emit('show', this);
-        if (this.popperJS) {
-          this.popperJS.enableEventListeners();
-        }
-        this.updatePopper();
-      } else {
-        if (this.popperJS) {
-          this.popperJS.disableEventListeners();
-        }
-        this.$emit('hide', this);
-      }
-    },
-
-    forceShow: {
-      handler(value) {
-        this[value ? 'doShow' : 'doClose']();
-      },
-      immediate: true
-    },
-
-    disabled(value) {
-      if (value) {
-        this.showPopper = false;
-      }
-    }
-  },
-  // 初始化 popperOptions
-  created() {
-    this.appendedArrow = false;
-    this.appendedToBody = false;
-    this.popperOptions = Object.assign(this.popperOptions, this.options);
-  },
-  // 设置事件监听器
-  mounted() {
-    this.referenceElm = this.reference || this.$slots.reference[0].elm;
-    this.popper = this.$slots.default[0].elm;
-
-    // eventMap 事件映射优化
-    const eventMap = {
-      clickToOpen: [
-        { element: this.referenceElm, event: 'click', handler: this.doShow },
-        { element: document, event: 'click', handler: this.handleDocumentClick },
-        { element: document, event: 'touchstart', handler: this.handleDocumentClick }
-      ],
-      click: [
-        { element: this.referenceElm, event: 'click', handler: this.doToggle },
-        { element: document, event: 'click', handler: this.handleDocumentClick },
-        { element: document, event: 'touchstart', handler: this.handleDocumentClick }
-      ],
-      hover: [
-        { element: this.referenceElm, event: 'mouseover', handler: this.onMouseOver },
-        { element: this.referenceElm, event: 'mouseout', handler: this.onMouseOut },
-        { element: this.popper, event: 'mouseover', handler: this.onMouseOver },
-        { element: this.popper, event: 'mouseout', handler: this.onMouseOut }
-      ],
-      focus: [
-        { element: this.referenceElm, event: 'focus', handler: this.onMouseOver },
-        { element: this.referenceElm, event: 'blur', handler: this.onMouseOut },
-        { element: this.popper, event: 'focus', handler: this.onMouseOver },
-        { element: this.popper, event: 'blur', handler: this.onMouseOut }
-      ]
-    };
-    // 事件监听器设置,为 referenceElm 和 popper 元素分别添加相应的事件监听器
-    eventMap[this.trigger].forEach(({ element, event, handler }) => {
-      on(element, event, handler);
-    });
-
-  },
-  // 用于显示、隐藏、销毁 popper，以及处理鼠标和键盘事件
-  methods: {
-    // 切换 Popper 的显示状态
-    doToggle(event) {
-      if (this.stopPropagation) {
-        event.stopPropagation();
-      }
-      if (this.preventDefault) {
-        event.preventDefault();
-      }
-      if (!this.forceShow) {
-        this.showPopper = !this.showPopper;
-      }
-    },
-    // 显示 Popper
-    doShow() {
-      this.showPopper = true;
-    },
-    // 隐藏 Popper
-    doClose() {
-      this.showPopper = false;
-    },
-    // 销毁 Popper 实例
-    doDestroy() {
-      if (this.showPopper) {
-        return;
-      }
-      if (this.popperJS) {
-        this.popperJS.destroy();
-        this.popperJS = null;
-      }
-      if (this.appendedToBody) {
-        this.appendedToBody = false;
-        document.body.removeChild(this.popper.parentElement);
-      }
-    },
-    // 创建 Popper 实例，并附加箭头和其他配置
-    createPopper() {
-      this.$nextTick(() => {
-        if (this.visibleArrow) {
-          this.appendArrow(this.popper);
-        }
-        if (this.appendToBody && !this.appendedToBody) {
-          this.appendedToBody = true;
-          document.body.appendChild(this.popper.parentElement);
-        }
-        if (this.popperJS && this.popperJS.destroy) {
-          this.popperJS.destroy();
-        }
-        if (this.boundariesSelector) {
-          const boundariesElement = document.querySelector(this.boundariesSelector);
-          if (boundariesElement) {
-            Object.assign(this.popperOptions.modifiers = this.popperOptions.modifiers || {}, {
-              preventOverflow: { boundariesElement }
-            });
-          }
-        }
-        this.popperOptions.onCreate = () => {
-          this.$emit('created', this);
-          this.$nextTick(this.updatePopper);
-        };
-        this.popperJS = new Popper(this.referenceElm, this.popper, this.popperOptions);
-      });
-    },
-    // 移除事件监听器并销毁 Popper
-    destroyPopper() {
-      off(this.referenceElm, 'click', this.doToggle);
-      off(this.referenceElm, 'mouseup', this.doClose);
-      off(this.referenceElm, 'mousedown', this.doShow);
-      off(this.referenceElm, 'focus', this.doShow);
-      off(this.referenceElm, 'blur', this.doClose);
-      off(this.referenceElm, 'mouseout', this.onMouseOut);
-      off(this.referenceElm, 'mouseover', this.onMouseOver);
-      off(document, 'click', this.handleDocumentClick);
-      this.showPopper = false;
-      this.doDestroy();
-    },
-    // 向 Popper 添加箭头
-    appendArrow(element) {
-      if (this.appendedArrow) {
-        return;
-      }
-      this.appendedArrow = true;
-      const arrow = document.createElement('div');
-      arrow.setAttribute('x-arrow', '');
-      arrow.className = 'vd-popper__arrow';
-      element.appendChild(arrow);
-    },
-    // 更新 Popper 实例的位置
-    updatePopper() {
-      this.popperJS ? this.popperJS.scheduleUpdate() : this.createPopper();
-    },
-    // 处理鼠标悬停事件
-    onMouseOver() {
-      clearTimeout(this._timer);
-      this._timer = setTimeout(() => {
-        this.showPopper = true;
-      }, this.delayOnMouseOver);
-    },
-
-    onMouseOut() {
-      clearTimeout(this._timer);
-      this._timer = setTimeout(() => {
-        this.showPopper = false;
-      }, this.delayOnMouseOut);
-    },
-    // 处理文档点击事件，判断是否需要隐藏 Popper
-    handleDocumentClick(e) {
-      if (!this.$el || !this.referenceElm ||
-        this.elementContains(this.$el, e.target) ||
-        this.elementContains(this.referenceElm, e.target) ||
-        !this.popper || this.elementContains(this.popper, e.target)
-      ) {
-        return;
-      }
-      this.$emit('documentClick', this);
-      if (this.forceShow) {
-        return;
-      }
-      this.showPopper = false;
-    },
-    // 判断一个元素是否包含另一个元素
-    elementContains(elm, otherElm) {
-      return elm.contains?.(otherElm) || false;
-    }
-  },
-  // 在组件销毁时移除所有事件监听器和 Popper 实例
-  destroyed() {
-    this.destroyPopper();
-  }
-}
-</script>
+<template>
+  <component :is="tagName" :class="{ 'vd-popper-active': showPopper }">
+    <transition :name="transition" :enter-active-class="enterActiveClass" :leave-active-class="leaveActiveClass"
+      @after-leave="doDestroy">
+      <span ref="popper" :class="rootClass" v-show="!disabled && showPopper">
+        <slot>{{ content }}</slot>
+      </span>
+    </transition>
+    <slot name="reference"></slot>
+  </component>
+</template>
+
+<script>
+// vue2 依赖 popper1.0，后期如果 vue3 则可升级 popper2.0
+import Popper from 'popper.js';
+
+function on(element, event, handler) {
+  if (element && event && handler) {
+    element.addEventListener(event, handler, false);
+  }
+}
+
+function off(element, event, handler) {
+  if (element && event) {
+    element.removeEventListener(event, handler, false);
+  }
+}
+
+export default {
+  // 定义了组件接收的属性，包括各种配置选项和默认值
+  props: {
+    tagName: {
+      type: String,
+      default: 'div',
+    },
+    trigger: {
+      type: String,
+      default: 'click',
+      validator: value => ['clickToOpen', 'click', 'clickToToggle', 'hover', 'focus'].includes(value)
+    },
+    delayOnMouseOver: {
+      type: Number,
+      default: 10,
+    },
+    delayOnMouseOut: {
+      type: Number,
+      default: 10,
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    content: String,
+    enterActiveClass: String,
+    leaveActiveClass: String,
+    boundariesSelector: String,
+    reference: {},
+    forceShow: {
+      type: Boolean,
+      default: false
+    },
+    dataValue: {
+      default: null,
+    },
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+    visibleArrow: {
+      type: Boolean,
+      default: true
+    },
+    transition: {
+      type: String,
+      default: ''
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: false
+    },
+    preventDefault: {
+      type: Boolean,
+      default: false
+    },
+    options: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    rootClass: {
+      type: String,
+      default: ''
+    }
+  },
+  // 定义组件的内部状态，包括 referenceElm, popperJS, showPopper 等
+  data() {
+    return {
+      referenceElm: null,
+      popperJS: null,
+      showPopper: false,
+      currentPlacement: '',
+      popperOptions: {
+        placement: 'bottom',
+        computeStyle: {
+          gpuAcceleration: false
+        }
+      }
+    };
+  },
+  // 监听 showPopper、forceShow 和 disabled
+  watch: {
+    showPopper(value) {
+      if (value) {
+        this.$emit('show', this);
+        if (this.popperJS) {
+          this.popperJS.enableEventListeners();
+        }
+        this.updatePopper();
+      } else {
+        if (this.popperJS) {
+          this.popperJS.disableEventListeners();
+        }
+        this.$emit('hide', this);
+      }
+    },
+
+    forceShow: {
+      handler(value) {
+        this[value ? 'doShow' : 'doClose']();
+      },
+      immediate: true
+    },
+
+    disabled(value) {
+      if (value) {
+        this.showPopper = false;
+      }
+    }
+  },
+  // 初始化 popperOptions
+  created() {
+    this.appendedArrow = false;
+    this.appendedToBody = false;
+    this.popperOptions = Object.assign(this.popperOptions, this.options);
+  },
+  // 设置事件监听器
+  mounted() {
+    this.referenceElm = this.reference || this.$slots.reference[0].elm;
+    this.popper = this.$slots.default[0].elm;
+
+    // eventMap 事件映射优化
+    const eventMap = {
+      clickToOpen: [
+        { element: this.referenceElm, event: 'click', handler: this.doShow },
+        { element: document, event: 'click', handler: this.handleDocumentClick },
+        { element: document, event: 'touchstart', handler: this.handleDocumentClick }
+      ],
+      click: [
+        { element: this.referenceElm, event: 'click', handler: this.doToggle },
+        { element: document, event: 'click', handler: this.handleDocumentClick },
+        { element: document, event: 'touchstart', handler: this.handleDocumentClick }
+      ],
+      hover: [
+        { element: this.referenceElm, event: 'mouseover', handler: this.onMouseOver },
+        { element: this.referenceElm, event: 'mouseout', handler: this.onMouseOut },
+        { element: this.popper, event: 'mouseover', handler: this.onMouseOver },
+        { element: this.popper, event: 'mouseout', handler: this.onMouseOut }
+      ],
+      focus: [
+        { element: this.referenceElm, event: 'focus', handler: this.onMouseOver },
+        { element: this.referenceElm, event: 'blur', handler: this.onMouseOut },
+        { element: this.popper, event: 'focus', handler: this.onMouseOver },
+        { element: this.popper, event: 'blur', handler: this.onMouseOut }
+      ]
+    };
+    // 事件监听器设置,为 referenceElm 和 popper 元素分别添加相应的事件监听器
+    eventMap[this.trigger].forEach(({ element, event, handler }) => {
+      on(element, event, handler);
+    });
+
+  },
+  // 用于显示、隐藏、销毁 popper，以及处理鼠标和键盘事件
+  methods: {
+    // 切换 Popper 的显示状态
+    doToggle(event) {
+      if (this.stopPropagation) {
+        event.stopPropagation();
+      }
+      if (this.preventDefault) {
+        event.preventDefault();
+      }
+      if (!this.forceShow) {
+        this.showPopper = !this.showPopper;
+      }
+    },
+    // 显示 Popper
+    doShow() {
+      this.showPopper = true;
+    },
+    // 隐藏 Popper
+    doClose() {
+      this.showPopper = false;
+    },
+    // 销毁 Popper 实例
+    doDestroy() {
+      if (this.showPopper) {
+        return;
+      }
+      if (this.popperJS) {
+        this.popperJS.destroy();
+        this.popperJS = null;
+      }
+      if (this.appendedToBody) {
+        this.appendedToBody = false;
+        document.body.removeChild(this.popper.parentElement);
+      }
+    },
+    // 创建 Popper 实例，并附加箭头和其他配置
+    createPopper() {
+      this.$nextTick(() => {
+        if (this.visibleArrow) {
+          this.appendArrow(this.popper);
+        }
+        if (this.appendToBody && !this.appendedToBody) {
+          this.appendedToBody = true;
+          document.body.appendChild(this.popper.parentElement);
+        }
+        if (this.popperJS && this.popperJS.destroy) {
+          this.popperJS.destroy();
+        }
+        if (this.boundariesSelector) {
+          const boundariesElement = document.querySelector(this.boundariesSelector);
+          if (boundariesElement) {
+            Object.assign(this.popperOptions.modifiers = this.popperOptions.modifiers || {}, {
+              preventOverflow: { boundariesElement }
+            });
+          }
+        }
+        this.popperOptions.onCreate = () => {
+          this.$emit('created', this);
+          this.$nextTick(this.updatePopper);
+        };
+        this.popperJS = new Popper(this.referenceElm, this.popper, this.popperOptions);
+      });
+    },
+    // 移除事件监听器并销毁 Popper
+    destroyPopper() {
+      off(this.referenceElm, 'click', this.doToggle);
+      off(this.referenceElm, 'mouseup', this.doClose);
+      off(this.referenceElm, 'mousedown', this.doShow);
+      off(this.referenceElm, 'focus', this.doShow);
+      off(this.referenceElm, 'blur', this.doClose);
+      off(this.referenceElm, 'mouseout', this.onMouseOut);
+      off(this.referenceElm, 'mouseover', this.onMouseOver);
+      off(document, 'click', this.handleDocumentClick);
+      this.showPopper = false;
+      this.doDestroy();
+    },
+    // 向 Popper 添加箭头
+    appendArrow(element) {
+      if (this.appendedArrow) {
+        return;
+      }
+      this.appendedArrow = true;
+      const arrow = document.createElement('div');
+      arrow.setAttribute('x-arrow', '');
+      arrow.className = 'vd-popper__arrow';
+      element.appendChild(arrow);
+    },
+    // 更新 Popper 实例的位置
+    updatePopper() {
+      this.popperJS ? this.popperJS.scheduleUpdate() : this.createPopper();
+    },
+    // 处理鼠标悬停事件
+    onMouseOver() {
+      clearTimeout(this._timer);
+      this._timer = setTimeout(() => {
+        this.showPopper = true;
+      }, this.delayOnMouseOver);
+    },
+
+    onMouseOut() {
+      clearTimeout(this._timer);
+      this._timer = setTimeout(() => {
+        this.showPopper = false;
+      }, this.delayOnMouseOut);
+    },
+    // 处理文档点击事件，判断是否需要隐藏 Popper
+    handleDocumentClick(e) {
+      if (!this.$el || !this.referenceElm ||
+        this.elementContains(this.$el, e.target) ||
+        this.elementContains(this.referenceElm, e.target) ||
+        !this.popper || this.elementContains(this.popper, e.target)
+      ) {
+        return;
+      }
+      this.$emit('documentClick', this);
+      if (this.forceShow) {
+        return;
+      }
+      this.showPopper = false;
+    },
+    // 判断一个元素是否包含另一个元素
+    elementContains(elm, otherElm) {
+      return elm.contains?.(otherElm) || false;
+    }
+  },
+  // 在组件销毁时移除所有事件监听器和 Popper 实例
+  destroyed() {
+    this.destroyPopper();
+  }
+}
+</script>

package/dist/components/popup/index.js

@@ -1,7 +1,7 @@
-import Popup from './index.vue';
-import './style.less';
-Popup.install = function (Vue) {
-  Vue.component(Popup.name, Popup);
-};
-
-export default Popup;
+import Popup from './index.vue';
+import './style.less';
+Popup.install = function (Vue) {
+  Vue.component(Popup.name, Popup);
+};
+
+export default Popup;