vue的input框始终聚焦 element

狂暴草鱼卷

已于 2022-03-16 11:29:10 修改

阅读量1k

点赞数 2

文章标签： vue.js

于 2021-04-25 20:08:05 首次发布

本文链接：https://blog.csdn.net/weixin_47353884/article/details/116137091

版权

vue的input框始终聚焦

- directive自定义指令
- $nextTick

directive自定义指令

今天写的时候发现element里面的input用这个方法不可以应该是嵌套盒子的问题
所以再加一个children[0]就好了

 directives: {
    focus: {
      inserted: (el) => {
        el.focus();
        // el.children[0].focus();
      },
    },
  },

 <input type="text" v-if="flag" v-focus />

通过v-if来控制input框的显示隐藏并且保证每次显示input框都聚焦

$nextTick

nextTick是获取数据更新之后的dom 那个显示隐藏切换获取焦点.不就是数据更新了.dom没更新.所以没法聚焦.放到$nextTick里面就可以了.

 <el-input ref="inputbox" size="mini"placeholder="请输入内容" v-model="input4"></el-input>
created() {
    this.showsearch();
  },
 methods: {
    showsearch() {
      this.$nextTick(() => {
        this.$refs.inputbox.focus();
      });
    },
  },