×

vue和element-ui:input输入框自动获取聚集焦点

作者:andy0012023.04.19来源:Web前端之家浏览:2388评论:0
关键词:vuejs

vueelement-ui: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>


您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20230419a1.html

网友评论文明上网理性发言 已有0人参与

发表评论: