自定义指令directive

一、在src目录下创建一个directive文件夹

• test.ts文件存放创建的自定义指令，index.ts用于接收所有指令进行统一处理
  

二、编写自定义指令

// test.ts文件
export default {
  // 写个自定义指令
  mounted(el: any, binding: any) {
    console.log(el, binding, "@@"); //el为绑定指令的dom，binging可以获取到指令后面绑定的数据
    const { value } = binding;
    console.log(value); 
    el.focus(); //对绑定指令的dom进行聚焦操作
  },
};

三、引入到index.ts

vue对插件的安装可以分为两种方式

方式一：直接使用函数，在main.js中调用

//index.ts文件
import test from "./test";
export default function (app: any) {
  app.directive("test", test);
}

方式二：使用对象，则必须给对象一个install属性

import test from "./test";
export default {
  install: function (app: any) {
    app.directive("test", test);
  },
};

四、引入main.ts进行注册

//main.ts文件
import directive from "./directive";
app.use(directive); //使用此方法会执行指令的函数或对象的install方法

五、指令使用

// 直接使用v-test可以获取到dom进行focus聚焦操作
 <input type="text" v-test />
//在指令后面绑定值可以在指令的binding.value中获取
 <input type="text" v-test="'测试数据'" />

六、效果展示

[外链图片转存中…(img-ydppr7Hc-1719562622682)]