vue 自定义指令 实例集合
2021-08-26 本文已影响0人
爱学习的小仙女早睡早起
含义：指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。
作用：普通 DOM 元素进行底层操作
使用
Vue.directive('my-directive', {
bind: function(){
//做绑定的准备工作
//比如添加事件监听器，或是其他只需要执行一次的复杂操作
},
inserted: function(){
//...
},
update: function(){
//根据获得的新值执行对应的更新
//对于初始值也会调用一次
},
componentUpdated: function(){
//...
},
unbind: function(){
//做清理操作
//比如移除bind时绑定的事件监听器
}
})
怎么将自定义指令注册到全局
// 新建一个 js （ directives.js ）文件来注册所有的全局指令
import Vue from'vue';
import Directives from'./directives';
Vue.use(Directives);
钩子函数的参数
-
el：指令所绑定的元素，可以用来直接操作 DOM 。 -
binding：一个对象，包含以下属性： -
name：指令名，不包括v-前缀。 -
value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。 -
oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。 -
expression：字符串形式的指令表达式。例如v-my-directive="1 + 1"中，表达式为"1 + 1"。 -
arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。 -
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。 -
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
使用场景
代码复用和抽象的主要形式是组件
当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令
但是，对于大幅度的 DOM 变动，还是应该使用组件
1、聚焦输入框
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 使用方法例如
<input v-focus>
2、将元素固定在页面上
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
el.style.top = binding.value + 'px'
}
})
// 使用方法例如
<p v-pin="200">Stick me 200px from the top of the page</p>
说明：指令的参数可以是动态的。例如，在v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。
3、任意方向固定元素
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
var s = (binding.arg == 'left' ? 'left' : 'top')
// arg 传给指令的参数 例如 v-my-directive:foo 中，参数为 "foo"
el.style[s] = binding.value + 'px'
}
})
// 使用方法例如
<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
new Vue({
el: '#dynamicexample',
data: function () {
return {
direction: 'left'
}
}
})
// 或者
<p v-pin:left="200">I am pinned onto the page at 200px to the left.</p>
自定义指令简写
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
4、模块权限，按钮级别权限
const auths=["order","users","activity"]; // 一般登录后获取到存储到全局，这里引用
// isAuth判断用户是否有某权限
const isAuth=(current)=>{
const roles=localStorage.getItem("auths"); // 用户权限
const isR=current.some(item => auths.includes(item));
return isR;
}
// 自定义指令
Vue.directive('auths', {
//01
bind: function (el, binding, vnode) {
},
//02
inserted: function (el, binding) {
const current = binding.value
if( !current || !isAuth(current) ){
// 没有绑定权限码，或者用户的权限list没有该权限码
el.parentNode && el.parentNode.removeChild(el);
// 没有权限时移除dom 或者加无权限遮罩
}
},
//03
update: function (el, binding, vnode,oldVnode) {
},
//04
componentUpdated: function (el, binding, vnode,oldVnode) {
},
//05
unbind: function () {
},
})
使用: 绑定自定义指令
<template>
<a v-auths="['order']">编辑订单</a>
</template>
