在使用element-ui+vue框架开发时，经常会遇到提交表单时验证填写项目，根据设定的必填选项对提交的内容做判断，并且自动聚焦定位到相对应的文本框上，那么应该如何来实现呢？今天就和大家一起分享关于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>
方法二：输入框设置ef。
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中
<template>
<div class="focusDemo">
<input type="text" v-model="username" v-focus />
</div>
</template>
<script>
export default {
data () {
return {
username: ''
}
}
}
</script>vue文件中
<template>
<div class="focusDemo">
<input type="text" v-model="username" v-focus />
</div>
</template>
<script>
export default {
data () {
return {
username: ''
}
}
}
</script>好了，以上内容就是今天和大家分享的关于element-ui+vue框架中input文本框自动获取焦点聚焦的实现方法及代码，你可以根据自己网站建设项目的需求来选择合适的方法。
