vue 如何设置自定义指令
时间: 2023-06-03 08:08:01 浏览: 120
可以使用 Vue.directive() 方法注册一个全局自定义指令,或者在组件中使用 directives 选项注册局部自定义指令。具体使用示例如下:
1.全局自定义指令:
Vue.directive('my-directive', {
bind: function (el, binding, vnode) {
// 指令第一次绑定到元素时调用
},
inserted: function (el, binding, vnode) {
// 被绑定元素插入父节点时调用
},
update: function (el, binding, vnode, oldVnode) {
// 被绑定元素所在模板更新时调用
},
componentUpdated: function (el, binding, vnode, oldVnode) {
// 被绑定元素所在模板完成一次更新周期时调用
},
unbind: function (el, binding, vnode) {
// 指令与元素解绑时调用
}
})
2.局部自定义指令:
Vue.component('my-component', {
template: '<div v-my-directive>...</div>',
directives: {
'my-directive': {
bind: function (el, binding, vnode) {
// 指令第一次绑定到元素时调用
},
inserted: function (el, binding, vnode) {
// 被绑定元素插入父节点时调用
},
update: function (el, binding, vnode, oldVnode) {
// 被绑定元素所在模板更新时调用
},
componentUpdated: function (el, binding, vnode, oldVnode) {
// 被绑定元素所在模板完成一次更新周期时调用
},
unbind: function (el, binding, vnode) {
// 指令与元素解绑时调用
}
}
}
})
希望能帮到您。