vue-cli4+typeScript引入自定义指令

2021-8-16 23:11:11

#前端#vue#typeScript

91

前言

最近在试着用vue3 + typeScript重构我这个博客项目，重构的过程中突然发现不知道如何引入自定义指令，上网查询了一波解决放方案后在此作一总结。

过程

• 环境 vue-cli 4.5.3 + typeScript
• 在src文件夹下添加directives文件夹用于存储指令相关文件
• /directives下添加index.ts文件用于批量导出指令

//导入相关模块
import Time from '@/directives/modules/time'
export default (app: any) => {
    app.directive(\"time\", {
        bind: function (el: any, binding: any) {
            el.innerHTML = Time.getFormatTime(binding.value);
            el.__timeout__ = setInterval(function () {
                el.innerHTML = Time.getFormatTime(binding.value);
            }, 6000);
        },
        unbind: function (el: any) {
            clearInterval(el.__timeout__);
            delete el.__timeout__;
        },
    });
}

• 在/directives下添加modules文件夹用于存储相关模块
• 以我的自定义指令time为例，我创建了time.ts文件存储该指令相关代码

const Time = {
  相关代码略
};
//导出
export default Time;

• 最后是修改src/main.ts这一个入口文件，将自定义指令导入项目，添加如下代码

//载入自定义指令
import directives from \"@/directives/index\"
directives(app)

app.mount('#app')

• 如此便成功将自定义指令导入自己的项目中了