全局注册自定义指令入口文件

全局注册自定义指令

• 第一步在根目录下或者其他文件夹下创建directive文件夹
• 第二步在directive文件夹下创建module文件夹和入口文件index.ts
  • module文件夹存储各个指令文件
    • /module/permisson.ts 权限指令
    • /module/showtip.ts 单行溢出展示省略号指令
    • /module/debounce.ts 防抖指令
    • ...
  • index.ts引入各个指令文件进行统一注册

    import { App } from "vue";
    import permission from "./modules/permisson";
    import debounce from "./modules/debounce";
    import lazyLoad from "./modules/lazyLoad";
    import showTip from "./modules/showTip";
    //...
    const directivesList: any = {
      // Custom directives
      permission,
      debounce,
      lazyLoad,
      showTip,
      // ...
    };
    
    const directives = {
      install: function (app: App<Element>) {
        Object.keys(directivesList).forEach((key) => {
          // 注册自定义指令
          app.directive(key, directivesList[key]);
        });
      },
    };
    
    export default directives;
    

• 第三步在main.ts中引入并注册指令

  // 全局指令注册
  import directives from "@/utils/directive/index";
  
  const app = createApp(App);
  app
    .use(ElementPlus, {
      locale: zhCn,
    })
    .use(directives)
    .mount("#app");