Vue自定义指令进入页面光标自动聚焦到input框上
使用 Vue.directive可以注册全局指令,第一个参数为指令的名字,第二个参数为对象,也可以是一个指令函数。
里面有几个钩子函数
// 钩子函数,处理指令相关的逻辑
bind(el, binding, vnode) {
// 指令绑定时的逻辑
},
inserted(el, binding, vnode) {
// 元素插入到 DOM 时的逻辑
},
update(el, binding, vnode, oldVnode) {
// 组件更新时的逻辑
},
unbind(el, binding, vnode) {
// 指令解绑时的逻辑
}
在指令的钩子函数中,通过传入的参数来获取更多信息
el:指令所绑定的元素,可以通过操作它来改变元素的样式、属性等。
binding:一个对象,包含了指令的信息,如 value(指令的绑定值)、modifiers(指令的修饰符)等。
vnode:Vue 编译生成的虚拟节点。
oldVnode:上一个虚拟节点,只在 update 钩子中可用。
下面写的进入页面光标自动聚焦到input框上
全局注册
Vue.directive('focus',{
inserted: function(el){
el.focus()
},
})
局部注册
在.vue中directives属性下面书写
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
使用
<input type="text" v-focus>
推荐阅读:
扫描二维码,在手机上阅读