此文章的记录主要为了以后如果遇到相同的开发问题,可以快速的解决问题:
vue如何自动获得input框的焦点呢?官网给出的答案是:自定义指令:v-focus
// 局部指令
directives: {
focus: {
// 指令的定义
inserted: function(el){
el.focus()
}
}
}
// 全局指令
Vue.directive('focus', {
// 当被绑定的元素插入到DOM中时
inserted: function(el) {
// 聚焦元素
el.focus()
}
})
如果项目的需求不是一进入就获得焦点,而是做了相关操作,失去焦点触发弹窗,点击确认在找回焦点;或者没有弹窗,只在失去焦点就判断是否合法,不合法要找回焦点,那么此时就可以用下面的方法实现
// 通过vue的ref来获得dom元素
this.$refs.input.querySelector('input').focus();
// 由于内核的原因ie要特别处理,加一个短暂延时实现
setTimeout(() => {this.$refs.input.querySelector('input').focus();},50);
各位博友如果对你有帮助,一分也是爱