在src下创建一个自定义指令存放的文件夹:
例如我这里建了一个叫
directive的文件夹,index是入口文件,inputenglish.ts就是我现在设置的一个用于限制输入框只能输入英文字符的指令。
inputenglish.ts(暴露注册这个指令的方法):
框架如下:
import type { App } from 'vue';
export function setInputEnglish(app: App) {
app.directive('input-english',(el)=>{
.......
})
}
在index.ts入口文件引入你写好要在项目中使用的每一个指令文件,,并暴露一个注册所有指令的方法:
import type {App} from 'vue';
import { setInputEnglish } from './inputEnglish';
export function setDirectives(app: App) {
// 加载需要的指令,引入之后放进来
setInputEnglish(app);
}
要在项目初始化的时候就自动注册所有自定义指令,所以在main.js中引入注册所有指令的方法并使用:
// main.js
import { createApp } from "vue";
import App from "./App.vue";
import { setDirectives } from "./directives";
const app = createApp(App);
// 注册所有自定义指令
setDirectives(app);
app.mount("#app");
在项目中使用:采用v-xxxx即可,例如我这里定义的是input-english,那么直接就是v-input-english: