Admin.UI/src/utils/events.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

/**
 * 事件基类，提供DOM事件和自定义事件侦听、触发、销毁功能，自定义事件基于Vue实现，面向对象类可继承该类实现事件相关功能
 * @module @/utils/events
 */

import { on, off } from 'element-ui/lib/utils/dom'
import Vue from 'vue'

/**
 * 事件处理基类
 * @export
 */
class Events {
  /**
   * @constructor
   */
  constructor() {
    /**
     * DOM事件句柄对象handler缓存集合,  私有属性
     * @type {Object[]}
     * @property {Object[]} handler
     * @property  {HtmlElement} handler.el DOM元素
     * @property {String} handler.eventName 事件名称，如: click、mouseenter、keydown
     * @property {Function} handler.callback 事件回调函数
     * @property {Function} handler.proxy 时间回调函数代理，更换了作用域this指向当前实例
     */
    this.__handlers__ = []

    /**
     * 自定义事件处理对象，基于Vue实例实现，私有属性
     * @type {Vue}
     */
    this.__event__ = new Vue({})
  }

  /**
   * 绑定DOM事件
   * @param {HtmlElement} el 元素DOM对象
   * @param {String} eventName 事件名称如：click、mouseenter、keydown
   * @param {Function} callback 事件回调函数
   */
  on(el, eventName, callback) {
    const proxy = callback.bind(this)
    const handler = { el, eventName, callback, proxy }
    this.__handlers__.push(handler)
    on(el, eventName, proxy)
    return this
  }

  /**
   * 绑定自定义事件
   * @param {String} name 事件名称
   * @param {Function} handler 事件处理函数
   * @returns {Vue}
   */
  $on(name, handler) {
    this.__event__.$on.apply(this.__event__, arguments)
    return this
  }