问题:

点击“搜索”之后显示input框,此时要求自动聚焦效果。尝试如下:
在这里插入图片描述

  1. 在标签上加v-foucs 或者 @autofocus=”autofocus” 不生效;
  2. 直接在点击事件中添加focus方法第一次不生效,再次点击搜索按钮才会自动聚焦。

解决:

在vue中,并不是每次数据改变都会触发更新dom,而是将这些操作都缓存在一个队列,在一个事件循环结束之后,刷新队列,统一执行dom更新操作。DOM状态更新后做点什么,需要用到this.$nextTick()。

<input type="search" id="seach_input" autocomplete="off"   v-model="searchVal"  ref="seach_input">

 methods: {
    showsearch () {
      this.beginSearch = true
      // this.$refs.seach_input.focus() 第一次不生效
      this.$nextTick(() => {
        this.$refs.seach_input.focus()
      })
},
}
Logo

前往低代码交流专区

更多推荐