关于vue中输入框的使用场景总结

目录

• 输入框的使用场景总结
• 1. 自动聚焦
• 2. 如何优雅的实现下面效果
• vue关于输入框的一些操作

输入框的使用场景总结

1. 自动聚焦

第1种方法：使用 $nextTick

mounted() {
  this.$nextTick(function () {
    this.$refs.myInput.focus();
  });
},

第2种方法：自定义 v-focus 指令

为了方便，这里用到了 jquery

Vue.directive('focus', {
  inserted(el) {
    // 兼容 Element 基于原生 input 封装的输入框组件
    let innerInput = el.querySelector('input');
    if (innerInput) {
      innerInput.focus();
    // 兼容原生 input
    } else {
      el.focus();
    }
  },
});

如果你有一个按钮可以控制输入框的显示和隐藏，需要每次显示的时候都自动聚焦，那要 v-if 而不能使用 v-show，因为只有 v-if 才能触发自定义指令的 inserted 生命周期函数。

2. 如何优雅的实现下面效果

效果描述：我们在开发表格的时候经常会遇到一个输入框，输入框聚焦的时候会显示输入框后面的“保存”按钮，失焦的时候后面的“保存”按钮隐藏。点击保存，保存输入框里面的内容。输入框失焦的时候（点击保存按钮保存成功除外），输入框里面的内容要显示原先的内容。  

这里实现的时候会遇到一些比较恶心的地方，比如说，点击保存按钮，输入框失焦了，保存按钮先隐藏了，就不会触发按钮上绑定的点击事件，等等。话不多说，直接上代码，看怎么优雅的去实现它。

代码实现： 

上面的代码在有横向滚动条的时候，如果出现了 e.relatedTarget === this.$refs[`saveBtn_${$index}`].$el 为 false，但我们感觉失焦的目标元素就是保存按钮的情况，我们可以把判断条件这么改一下：

e.relatedTarget === this.$refs[`saveBtn_${$index}`].$el
// 改成（下面使用了jQuery） 
$(e.relatedTarget).hasClass(`J_saveBtn_${$index}`）

这样就 OK 了！

vue关于输入框的一些操作

关于输入框

监听输入

失去焦点的事件

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。