自定义指令
Vue 自带的指令无法满足开发需求,这时需要自定义一些指令。指令可以注册为全局指令或者局部指令。全局指令使用 Vue 对象下的 directive
方法定义,局部指令在 Vue 实例中设置 directives
属性。
如下代码所示:
// 注册为全局指令
Vue.directive('focus', {
inserted: function (el) {
// 获取焦点事件
el.focus()
}
})
// 注册为局部指令
let vm = new Vue({
el: '.container',
directives: {
focus: {
inserted: function (el) {
// 调用触发该指令元素的 focus 属性,获取焦点
el.focus()
}
}
}
})
在定义指令时无需使用 v-
作为前缀,在调用指令时,需要添加 v-
前缀。
有参数的自定义指令
如果自定义的指令中需要传递参数,那么在 inserted
后面函数的形参中设置多个值,其中第一个值为绑定该指令的元素,第二个值为传递的参数。若想要获取第二个参数中的值,需要调用该参数的 value
属性,如下代码所示:
Vue.directive('bg_color', {
// 函数中接收两个参数,第一个参数为触发该指令的元素,第二个参数为该指令中传递的参数
inserted: function (el, obj) {