自定义指令实践

• 创建Directives文件夹管理所有的自定义指令文件

• 文件夹下创建index.js用来管理所有的指令文件

• main.js中注册所有指令

文件目录

.

├── src

├── directives

├── lazy.js

├── debounce.js

└── install.js

index.js

/**
 * 指令集合
 * * @module directives
 * * @description 该模块包含所有自定义指令的集合，便于在 Vue 应用中统一管理和使用。
 * * * @example
 * * import directives from '@/directive';
 * * * Vue.use(directives);
 * * * @see {@link https://vuejs.org/v2/guide/custom-directive.html Vue Custom Directives}
 * * * @see {@link https://vuejs.org/v2/api/#Vue-directive Vue.directive API}
 */
import lazy from './lazy';
import debounce from './debounce';

 const directives = {
  lazy,
  debounce,
};


// 导出指令对象
export default {
  install(Vue) {
    Object.keys(directives).forEach(name => {
      Vue.directive(name, directives[name]);
    });
  }
};

debounce.js

/**
 * 带防抖功能的指令
 * 使用示例：
 * - v-debounce="submit"
 * - v-debounce:1000ms="search"
 */
export default {
  inserted(el, { value, arg }) {
    const delay = arg ? parseInt(arg) : 300
    let timeout = null

    el.addEventListener('click', () => {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        value(el.value)
      }, delay)
    })
  },
  
  // 组件更新时清理定时器
  componentUpdated(el) {
    clearTimeout(el.__debounceTimeout__)
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'

import directives from './directive'

...

Vue.use(directives) // 注册自定义指令

...

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')