1. 需求 :
- 当页面有输入框时,切换到当前页面时,输入框自动聚焦
2. 思路 :
- 通过inserted钩子函数中的形参el指向绑定指令的DOM元素
- 由于我们可能使用第三方组件库 , 需要用nodeName属性判断一下当前元素是否为输入框
- 当组件更新时 , 通过update钩子函数来检测
3. 具体代码实现:
Vue.directive('fofo', {
inserted(el) { // 指令所在标签, 被插入到真实DOM触发一次(仅触发一次)
fofo(el)
},
update(el) { // 指令所在标签被更新时触发
fofo(el)
})
function fofo(){
if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
el.focus()
} else {
el.querySelector('input').focus()
}
}