本文已参与[新人创作礼]活动，一起开启掘金创作之路
一.描述：
Vue中自定义指令分为局部和全局,下面以一个简单的获取焦点事件简单使用一下
二.全局注册：
可以在main.js中添加，但是不推荐，推荐新建一个文件夹用于储存自定义指令在main.js中引入即可
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
三.局部注册：
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
四.在模块中使用
<input v-focus>
<img v-errorImg="默认图片" ...>
<button v-arrow ...>
五.钩子函数
一个指令定义对象可使用多个钩子函数
bind：
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted:
被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入到文件中）
update:
所在组件的VNode更新时调用
componentUpdated：
指令所在组件的VNode及其子VNode全部更新后调用
unbind:
只调用一次，指令与元素解绑时调用
指令钩子函数会被转入以下参数：
el
指令所绑定的元素，可以直接操作DOM(常用)
binding(常用)
一个对象，包含以下property：
name
指令名，不包含`v-`前缀
value(常用)
指令的绑定值
expression：字符串形式的指令表达式
arg：传给指令的参数，可选(常用)
modifiers：一个包含修饰符的对象
update 和 componentUpdated
oldValue
指令绑定的前一个值，仅在 `update` 和 `componentUpdated` 钩子中可用。无论值是否改变都可用
oldVnode：
上一个虚拟节点，仅在 `update` 和 `componentUpdated` 钩子中可用
vnode：
Vue 编译生成的虚拟节点
六. 简单举例
1.判断是否上传图片没有则显示默认图片
Vue.directive('errorImg', {
inserted(el, binding) {
el.onerror = function() {
// 元素加载执行的时候出现错误就会触发这个事件，事件触发：表示资源加载失败
// 解决方法：如果图片加载失败：就显示默认图片，加载成功就不用管
el.src = binding.value
}
}
})
//使用
. . .
<img v-errorImg="defaultImg" :src="avatar" class="user-avatar">
. . .
import defaultImg from '../../assets/common/head.jpg'
export default {
data() {
return {
defaultImg: defaultImg
}
},
//优化：避免每次都设置默认图片操作
import defaultImg from '@/assets/404_images/404.png'
Vue.directive('errorImg', {
inserted(el, binding) {
// el，指令所绑定的元素，可以用来直接操作DOM
// binding里面包含事件信息
el.src = defaultImg
el.onerror = function() {
// console.log(el,binding,7);
el.src = binding.value
}
}
})
使用 <img v-errorImg="avatar" :src="avatar" class="user-avatar">
2.按钮级权限控制
Vue.directive('arrow', {
inserted(el, binding) {
// 通过自定义指令显示excel文件导出按钮是否显示
// 通过传过来的showBtn，然后在points数组中查找，如果有就表示按钮有权限，没有就不显示按钮，没有权限
var points = store.state.user.userInfo.roles.points
var flag = points.includes(binding.value)
if (!flag) {
// 不显示====需要将按钮移除===不能自杀，需要父节点移除自己
el.parentNode.removeChild(el)
}
}
})
//使用
<el-button
v-arrow="per"
size="small"
type="primary"
@click="handleDownload"
>导出</el-button>
. . .
export default {
data() {
return {
per: 'point-user-delete',//此为按钮权限名
具体详情请参考官网谢谢cn.vuejs.org/v2/guide/cu…
