web-component-gallery 2.0.13 → 2.0.15

package/lib/style/page.less

@@ -63,7 +63,7 @@ ol {
     flex: 1;
     min-height: 0;
     background: @component-background;
-    .specing(0 @padding-lg @padding-md);
+    .specing(@padding-md @padding-lg);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-component-gallery",
-  "version": "2.0.13",
+  "version": "2.0.15",
   "description": "基础vue、antdvue、less实现的私有组件库",
   "main": "dist/index.umd.js",
   "files": [

package/utils/EventAutoDisposer.js

@@ -0,0 +1,88 @@
+const EventAutoDisposer = {
+  install(Vue) {
+    const vm = new Vue()
+    const componentListeners = new WeakMap()
+    const windowEventListeners = new WeakMap()
+
+    /**
+     * 设置销毁钩子
+     * @param {VueComponent} target 目标组件
+     * @param {WeakMap<Object, Map<Function, Function>>} listenersMap 监听器映射
+     */
+    function setupDisposeHook(target, listenersMap) {
+      if (target.$options && target.$options.beforeDestroy) {
+        const originalDestroy = target.$options.beforeDestroy || (() => {})
+        target.$options.beforeDestroy = function() {
+          originalDestroy.call(this)
+          this[`${listenersMap === componentListeners ? 'event' : 'window'}BusDisposer`]?.()
+        }.bind(target)
+      }
+    }
+
+    /**
+     * 统一的事件监听器注册逻辑
+     * @param {VueComponent} target 目标组件
+     * @param {string} event 事件名称
+     * @param {Function} callback 回调函数
+     * @param {Object} disposer 事件发射器(vm或window)
+     * @param {WeakMap<Object, Map<Function, Function>>} listenersMap 监听器映射
+     * @returns {Function} 返回清理函数
+     */
+    function registerListener(target, event, callback, disposer, listenersMap) {
+      if (!listenersMap.has(target)) {
+        listenersMap.set(target, new Map())
+        setupDisposeHook(target, listenersMap)
+      }
+
+      const eventRemover = () => disposer[listenersMap === componentListeners ? '$off' : 'removeEventListener'](event, callback)
+      const listeners = listenersMap.get(target)
+      listeners.set(callback, eventRemover)
+
+      if (target.$options && target.$options.beforeDestroy) {
+        target[`${listenersMap === componentListeners ? 'event' : 'window'}BusDisposer`] = () => {
+            listeners.forEach(dispose => dispose())
+            listeners.clear()
+        }
+      }
+
+      disposer[listenersMap === componentListeners ? '$on' : 'addEventListener'](event, callback)
+      return eventRemover
+    }
+
+    // 组件事件监听
+    function $on(component, event, callback) {
+      return registerListener(component, event, callback, vm, componentListeners)
+    }
+
+    // 窗口事件监听
+    function $onWindow(component, event, callback) {
+      return registerListener(component, event, callback, window, windowEventListeners)
+    }
+
+    // 事件发射
+    function $emit(event, ...args) {
+      vm.$emit(event, ...args)
+    }
+
+    // 全局销毁
+    function dispose() {
+      vm.$off()
+      componentListeners = new WeakMap()
+      windowEventListeners = new WeakMap()
+    }
+
+    // 挂载到Vue原型
+    Vue.prototype.$bus = {
+      $on,        // 组件事件监听
+      $onWindow,  // 窗口事件监听
+      $emit,      // 事件发射
+      dispose,    // 全局销毁
+      $offFor: (component, event, callback) => { // 取消特定事件注册
+        const disposer = componentListeners.get(component)?.get(callback)
+        if (disposer) disposer()
+      }
+    }
+  }
+}
+
+export default EventAutoDisposer