最近益达同学,在用vue写项目,中间也遇到了一些难题,写此篇文章是来记录下解决办法,以备自己遗忘

今天我遇到的需求是,点击按钮生成一条input,然后让input获取输入焦点

点击按钮生成input,益达同学前几天完成了,不知道的可以去看看连接直达

1、vue自定义指令

Vue.directive('focus', {
    // 当绑定元素插入到 DOM 中。

    inserted: function (el) {
        // 聚焦元素
        el.focus()
    },
    //也可以用update,update就是当页面有操作的时候就触发,比如点击按钮,输入框输入都算。
    //有一个要注意的就是,就是你页面有几个input,比如一个input绑定了v-focus,一个没有绑定。你在没绑定v-focus的input输入时,绑定了v-focus的input就是自动获取焦点,这是个bug.
    //update: function (el) {
    //el.focus()
    //}
});
  <input type="text"  style="width: 100%;height: 36px;padding-left: 5px;" @@blur="reg(item.synWords[0])" v-model="item.synWords[0]"   v-focus>

2、ref

<input ref="input">
new Vue({
  ...
  mounted() {
    this.$refs['input'].focus()
   
  }
})

这里须详细说下.ref只实用单个input,多个的话,只有第一个input才会生效

综合考虑下,还是第一种方法适合我这个情况

the end

欢迎留言交流,一起学习前端,一起学习vue~


扫描二维码,在手机上阅读!