vue 输入框获取焦点

最新推荐文章于 2024-01-17 16:39:18 发布

落花见流水

最新推荐文章于 2024-01-17 16:39:18 发布

阅读量7.1k

点赞数

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_41913971/article/details/106685664

版权

本文介绍了如何在Vue中实现输入框自动获取焦点。通过给输入框添加v-focus属性，并自定义一个获得焦点的指令，结合点击事件触发聚焦，详细阐述了Vue自定义指令的应用。

摘要由CSDN通过智能技术生成

1）输入框给一个v-focus属性：

<input  ref="searchInput" v-focus>

2）自定义获得焦点指令：

 directives: {
        focus: {
            // 指令的定义
            inserted: function(el) {
                el.focus();
            }
        }
    },

3）点击事件触发聚焦

this.$nextTick( () => {
        this.$refs.searchInput.focus();
  })

完整代码：
<input
	@keyup="searchGame"
    ref="searchInput"
    v-focus
     class="game__search-input"
      type="text"
      placeholder="搜索"
      v-model="searchGameName">
      
<div  @click="handleKey"  class="game__pop-key-search"></div>

<script>
export default {
    name: 'SelectGame',
    components: {},
    data() {
        return{
            searchGameName: '', // 搜索名