×

Vue问题BUG解决方案:使用el-input自动获取焦点和二次获取焦点

作者:Terry2022.12.08来源:Web前端之家浏览:2503评论:0
关键词:vuejs

Vue问题BUG解决方案:使用el-input自动获取焦点和二次获取焦点。

问题

输入框旁边有一个编辑按钮,点击时,才可以对输入框进行编辑。如下图:

image.png

为了方便输入,需要自动获取焦点,所以加入了autofocus,但是发现,只有第一个并且第一次点击才起作用。

查了网上的一些文档,说是跟dom的渲染顺序和数据的缓存有点儿关系,至于深层次的原因,还没查到。

然后使用了Vue提供的自定义指令来解决,还有一点儿需要注意,el-input在页面渲染后,外层是个div,需要拿到里面的input才会有效果。

<el-input v-focus></el-input>

directives: {
  // 注册一个局部的自定义指令 v-focus
  focus: {
    // 指令的定义
    inserted: function (el) {
      // 聚焦元素
      el.querySelector('input').focus()
    }
  }
},

还有一种解决方案,是使用 Vue.nextTick() 和 Ref去做,例子就不去写了,都是去操作dom的。

使input和el-input自动获取焦点的处理

【普通input的自定义指令操作】:先在入口文件注册一个全局自定义指令

// main.js
Vue.directive('focus', {
  inserted (el, binding, vnode) {
    // 聚焦元素
    el.focus()
  }
})

【普通input的自定义指令使用】:v-"+指令名"

// index.vue
<input v-focus placeholder="因为有v-focus,所以我聚焦了" />

【el-input的自定义指令操作】:先在入口文件注册一个全局自定义指令

// main.js
Vue.directive('fo', {
  inserted (el, binding, vnode) {
    // 聚焦元素
    el.querySelector('input').focus()
  }
})

【el-input的自定义指令使用】:v-"+指令名"

// index.vue
<el-input v-fo placeholder="因为有v-fo,所以我聚焦了"></el-input>

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20221208.html

网友评论文明上网理性发言 已有0人参与

发表评论: