element-ui vue input输入框自动获取焦点聚焦
有时候会遇到要输入框自动获取焦点的情况，解决如下：
方法一
步骤：
1.在script中写directives,注册一个全局的自定义指定 v-focus
directives: {
focus: {
inserted: function(el) {
el.querySelector("input").focus();
}
}
},
2.在input框直接使用
<el-input
...
v-focus
>
</el-input>
方法二
步骤：
1.给输入框设置一个ref
<el-input
ref="saveTagInput"
>
2.在需要的时候操作ref获取焦点
this.$refs.saveTagInput.focus();vue输入框自动获取焦点的三种方式
方式一：原生JS操作DOM
<template>
<div class="focusDemo">
<input type="text" v-model="username" id='inputId'/>
</div>
</template>
<script>
export default {
data () {
return {
username: ''
}
},
mounted () {
document.getElementById('inputId').focus()
}
}
</script>方式二：ref方式实现
<template>
<div class="focusDemo">
<input ref="inputName" type="text" v-model="username" />
</div>
</template>
<script>
export default {
data () {
return {
username: ''
}
},
mounted () {
this.$nextTick(() => {
this.$refs.inputName.focus()
})
}
}
</script>方式三：使用自定义指令
main.js中
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时
inserted: function (el) {
// 聚焦元素
el.focus()
},
update: function (el) {
// 聚焦元素
el.focus()
}
})vue文件中
<template>
<div class="focusDemo">
<input type="text" v-model="username" v-focus />
</div>
</template>
<script>
export default {
data () {
return {
username: ''
}
}
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
