众所周知,自定义指令在vue中有两种注册方式,一种是全局注册,一种是局部注册,我查阅了CSDN不少同道中人提出的方法,基本都是较为具体的操作,并没有说,针对存在多个自定义指令时,如何快捷高效的导入,全局注册是在入口文件main.js中进行导入,然后注册,但是在大型项目中main.js导入的文件与插件可能会有很多,这就意味着,存在多个自定义指令时main.js文件会显得十分杂乱无章,而局部注册的话,又会显得不太优雅。因此可以在src文件夹下,新建directive文件夹,准备index.js文件
在index.js文件中准备好自定义指令,并且导出,举个例子:
自定义图片不显示的指令
export const imgerror = {
inserted(el, binding) { // el指的是 使用指令的dom元素 图片标签
// console.log(el)
// console.log(binding.value) // 是指令的值
// 如果图片加载失败, 设置默认图像
el.onerror = () => { // onerror是图片加载失败后出触发, 图片加载失败后 设置图像的默认值
console.log('图片加载失败了')
el.src = binding.value || 'https://img0.baidu.com/it/u=3306072466,501307884&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500'
}
}
}
自定义元素背景的指令
export const bgc = {
inserted(el) {
el.style.background = 'pink'
}
}
然后在main.js中按需导入
// import '@/directives' // 直接导入并执行会将所有的组件注册
// 将directives中所有按需导出的指令批量全部注册
// import * as 变量名 from '路径' 接收到按需导出的文件的所有成员, 会被存储到一个对象中
import * as directives from '@/directives'
// for (const k in directives) { Vue.directive(k, directives[k]) }
// console.log(Object.keys(directives)) // ['bgc', 'imgerror']
Object.keys(directives).forEach(item => { Vue.directive(item, directives[item]) })
这样子既节约空间,也比较优雅