vue 输入框获取焦点

最新推荐文章于 2025-04-02 15:46:07 发布

落花见流水

最新推荐文章于 2025-04-02 15:46:07 发布

阅读量7.3k

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_41913971/article/details/106685664

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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: '', // 搜索名称
        }
    },
    directives: {
        focus: {
            // 指令的定义
            inserted: function(el) {
                el.focus();
            }
        }
    },
    methods: {
		/**
         * 点击开始搜索游戏
         */
        searchGame () {
       		3）点击事件触发聚焦
            this.$nextTick( () => {
                this.$refs.searchInput.focus();
            })
            let gameList = this.games;
            if (this.searchGameName !== '') {
                gameList = this.games.filter((item) => {
                    return item.app_name.indexOf(this.searchGameName) !== -1
                })
            }
            this.picGameData(gameList);
        },
        /**
         * 点击字符搜索游戏
         */
        handleKey() {
        	this.$nextTick( () => {
            	this.$refs.searchInput.focus();
            })
         }
	}
}

vue自定义指令知识：https://cn.vuejs.org/v2/guide/custom-directive.html