vue单文件自定义指令的封装

                                                                                                           vue单文件自定义指令的封装

第一步（封装一个js文件）
 

// 暴露并配置指令  功能添加背景颜色
export const mycolor = {
  // 解析结构完成后自动运行钩子函数
  inserted(el, binging) {  //el表示指令所绑定的元素，可以用来操作DOM
    el.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  />