element-ui vue input输入框自动获取焦点聚焦方式

来源：jb51　　时间：2023/4/19 9:00:57　　对本文有异议

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>