随笔-ivew使用vue自定义指令on-focus无效
看视频学习vue,搭建一个ivew-vue项目
在学习自定义指令的时候发现按照官网的自定义指令并不生效,让input框页面加载自动聚焦
代码如下:
<i-input search enter-button="Search" @on-search="search(searchCondition)" v-model="searchCondition" v-focus/>
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
经过打断点发现,i-input中通过v-focus进来的el参数并非是input元素,而是父级div元素,代码改成下面就好了
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
if(el.tagName.toLocaleLowerCase() == 'input'){
el.focus()
}else{
if(el.getElementsByTagName('input')){
el.getElementsByTagName('input')[0].focus()
}
}
}
})
- END