vue单文件自定义指令的封装
第一步(封装一个js文件)
// 暴露并配置指令 功能添加背景颜色export const mycolor = {// 解析结构完成后自动运行钩子函数inserted(el, binging) { //el表示指令所绑定的元素,可以用来操作DOMel.style.color = binging.value; //binging:一个对象,包含多个属性,特别里面的value,通过它可以获取指令的绑定值,当用户给指令绑定了值的时候,通过binging.value可以获取},};// 自动聚焦export const myfocus = {inserted(el) {el.focus();},};
第二步(在单文件组件中引入 因为封装多个指令,传过来是对象,所以需要解构)
// 引入封装的自定义指令import { myfocus } from '@/utils/02.封装指令';
第三步 注册指令
// 注册指令directives: {myfocus,},
第四步 在需要用指令的地方添加指令,用法和正常指令用法一样
<input type="text" class="taginput" v-myfocus />