自我介绍
大家好，我叫小瑜（咸鱼），今天是2023年2月22日。我感到非常的冲动，不是我感到非常的激动~因为今天有很多的2。 2是我们计算机的幸运数字，因为我们计算就是二进制。 和大家开一个小小的玩笑。我将记录一些自己学习的内容，可能会很基础，但是作为一枚咸瑜，也是提高自己的一种方式，接下来开始正题！
封装全局自定义指令
1、首先看下局部自定义指令的语法
// 假设我需要将这段文字设置为红色
<div class="pic-name" v-color="'red'">
实现全局自定义指令
</div>
// 局部指令挂载
directives: {
color: {
inserted (el, binding) { // 表示使用指令的DOM元素插入到了DOM结构中
console.log(el) // el表示当前DOM元素
console.log(binding.value) // 是表述当前指令的一个对象，有value值就是标签中等号后面的值
el.style.color = binding.value
}
}
}
2、好，现在有个需求，网页中有个img，但是没有上传图片，或者图片路径错误，导致图片开裂，我们需 要将这些图片，默认显示出来，先看一下网页中原先的样子。
<div class="pic">
<img src="" alt="" v-imgError="defaultImg">
</div>
// 导入默认显示的图片
import defaultImg from '../common/bigUserHeader.png'
data () {
return {
// 保存到data中
defaultImg
}
},
// 局部指令挂载
directives: {
// 自定义指令 将开裂或者未添加路径的图片显示
imgError: {
inserted (el, { value }) {
el.addEventListener('error', () => {
el.src = value
})
}
}
}
3、但是 如果多个页面 我都要去处理图片以上两个需求 - 颜色和图片开裂的需求呢？一个一个去写岂不和很烦，那么就用全局的指令。
需要在mian.js文件中定义全局自定义指令
Vue.directive('指令名', {
inserted (el, binding) {
}
})
但是这一条一条写 很麻烦 而且会让mian.js文件越来越冗余，不是我们想要的结果，有没有什么办法可以少写一些重复的代码呢？ 当然可以！
4、首先在根目录下创建一个文件夹，我这里取名directives 并且创建一个js文件开始抽离指令内容
按需使用 创建两个方法
/**
* 处理图片开裂
*/
export const imgError = {
inserted (el, { value }) {
el.addEventListener('error', () => {
el.src = value
})
}
}
/**
* 处理自定义颜色
*/
export const color = {
inserted (el, { value }) {
el.style = value
}
}
// 一次性导入
import * as directives from './directives'
console.log(directives)
5、先打印看一下， 这不是我们定义的两个方法吗？
// 在main.js文件中一次性导入
import * as directives from './directives'
// 遍历拿到每一个对象
for (const key in directives) {
// 因为directives是一个对象
// 我们需要访问对象的原型上的自有方法，通过hasOwnProperty.call进行判断
if (Object.hasOwnProperty.call(directives, key)) {
const value = directives[key]
// 将指令赋值
Vue.directive(key, value)
}
}
完成
但是这样写 还是觉得很烦 既要遍历 还要if判断 有点小复杂 有没有更好的办法？
而且hasOwnProperty.call是什么？ 一脸懵逼！
6、那么directives是一个对象可以使用,我们使用Object.keys拿到每一项的值并且拿到一个数组，我们看下结果。
7、那么好办了，遍历数组，再次进行赋值两行搞定！！
Object.keys(directives).forEach(key => {
Vue.directive(key, directives[key])
})
看一波效果！
现在如果还要继续添加指令就直接在directives下中添加就行了~~~
