教你一个vue小技巧，通常人我不说的

本文由云+社区发表

1. 需求

最近的项目中，须要实如今vue框架中动态渲染带提示框的单选/多选文本框，具体的效果以下图所示，在输入框聚焦时，前端组件经过接收的kv参数渲染出选项，用户点击选项，能够将选择的选项的key拼装到输入框中，同时容许用户自由输入。

因为项目中使用的element-ui，首选考虑使用组件的input和select组件，然而实际使用中发现框架提供的组件不能很好知足此需求。例如，使用带输入建议的input组件，可以实现提示框和单选，但并不能方便地实现多选(重复选择会覆盖输入框内的内容)。

而使用框架提供的select选择器的远程搜索功能，可以实现提示框，也能轻松实现单选与多选，但select组件的内容只能经过用户选择(文本框内容必须包含于提示选项中)，不容许用户自由输入文本内容。

再加上设计稿须要实现三列布局，最终的返回结果须要动态拼装选项key值，若对现有的element组件进行改形成本太高，所以，尝试封装带提示框的单选/多选文本框组件，记录下封装过程当中组件交互方面遇到的问题。

2. 接口参数设计

组件支持传入6个参数，分别为

1. size (尺寸，String， medium / small / mini)
2. value (输入值，String，可使用sync修饰符实现双向绑定)
3. opt (选项列表，Array，kv数组形如{key:1, value:xxx})
4. seperator (分隔符，String，如','、'|'、'-')
5. multiple (是否支持多选，Boolean)
6. placeholder (提示，String)

   调用方式以下：

<cs-select
  size="mini" // 尺寸
  :value.sync="value" // value
  :opt="optParams.kv" // 选项 
  seperator="," // 分隔符
  :multiple="true">
</cs-select>

3. 提示框显示隐藏交互实现

细化上述需求，须要在用户点击输入框(获取焦点)时，显示提示框，在用户点击空白区域时隐藏提示框，点击组件自身时不作任何操做。组件的模板结构以下，经过show变量控制提示框的显示与隐藏，在组件的输入框绑定聚焦和失焦事件： @focus="onfocus" 和 @blur="onblur"，在focus时设置this.show为true，blur时为false，因为点击了输入框外的选项元素必然致使输入框失焦从而自动关闭，全部问题的关键在于如何实现点击提示选项而不隐藏提示框。

<template>
  <div>
      <!-- 输入框 -->
    <el-input
      @focus="onfocus
      @blur="onblur>
    </el-input>
    <!-- 提示框 -->
    <div v-if="show && opt.length > 0">
      <el-row>
        <el-col :span="8" v-for="(item, index) in opt" :key="index">
          {{item.value}}
        </el-col>
      </el-row>
    </div>
  </div>
</template>

3.1 尝试方案1: click事件主动聚焦

根据上述需求，毫无疑问联想到能够为选项绑定click事件，调用el-input的focus()方法进行主动聚焦，实现以下，此处使用了vue的ref，经过$ref来查找dom元素。

clickEvent () {
  this.show = true // 设置提示框显示
  this.$refs.input.$el.querySelector('input').focus() // 设置主动聚焦
}

问题：实际开发过程当中发现，每次点击提示选项后，提示框会闪烁一次，缘由在于js的事件机制，blur事件先于click事件执行，致使提示框隐藏后再显示，形成闪烁。

3.2 尝试方案2: blur事件添加延时器 + 开关变量

因为方案1blur事件先于click事件执行，所以考虑使用settimeout延时器来改变执行时间，实现以下。

blurEvent () {
  setTimeout(() => {
    this.show = false
  }, 200)
}

问题：实际开发过程当中发现，延时器延时执行关闭操做，致使输入框获取焦点后，主动关闭了提示框，再也不自动打开，不知足需求，所以考虑使用开关变量canClose判断当前是否须要执行关闭，实现以下。

focusEvent () {
  this.show = true
  this.canClose = true // 聚焦时打开开关
},
blurEvent () {
  if (this.canClose) {
    setTimeout(() => {
      this.show = false // 只有开关打开时才执行关闭
    }, 200)
  }
},
clickEvent (key) {
  this.canClose = false // 点击提示选项，关闭开关
  this.show = true
  ...
}

问题：实际开发过程当中发现，大多数状况下，提示框可以显示与隐藏，可是当操做较快时，会偶尔出现提示框不能关闭或提早关闭的状况，分析缘由在于，延时器期间任何对开关的操做可能致使组件开关状态变化，导致状态紊乱。

3.3 尝试方案3: 不使用blur，关闭方法改成事件委托，动态绑定class

若是关闭不使用blur，而是经过点击事件触发，则不会存在上述时序问题，所以考虑在全局使用事件委托，监听用户的点击事件，经过判断节点特殊class实现提示框关闭，实现以下。

$('body').on('click', (event) => {
  this.show = false
})
$('body').on('click', className, (event) => {
  this.show = true
})

问题1：事件委托，使用固定的class，当同时渲染多个组件时，没法实现单独管理提示框的开关，所以没法渲染多组件，所以class使用动态绑定，每一个组件使用不一样的class，实现以下。

问题2：阻止冒泡，若是组件的父容器阻止了冒泡，则没法触发body上绑定的关闭方法，须要针对父容器单独处理。

let randId = Math.round(Math.random()*100000)
this.className = `cs-select-${randId}`
// 单独处理父容器，在父容器上绑定关闭事件
...

改造后的组件表面看起来已经基本可用，实际存在诸多问题：

问题1：组件中对父组件绑定了事件，违反了设计模式的迪米特法则，增长了组件间的耦合，不利于后期维护。

问题2：上述操做只考虑了点击事件的关闭，忽略了其余可能关闭的状况，如使用tab按键切换输入框时也须要能正常显示隐藏提示框。

问题3：绑定事件过多会带来性能隐患甚至致使意想不到的问题发生。

3.4 尝试方案4: onfocus + onblur + mousedown + 开关

因为focus事件先于click事件执行，致使了上述方案1和方案2问题的产生，经过查阅资料可知，mousedown事件先于focus事件执行，所以，使用onfocus + onblur + mousedown + 开关可以很好解决上述执行时序问题，具体实现以下。

focusEvent () {
  this.show = true
  this.canClose = true // 聚焦时打开开关
},
blurEvent () {
  if (this.canClose) {
    this.show = false // 只有开关打开时才执行关闭
  }
},
mousedownEvent (key) {
  this.canClose = false // 点击提示选项，关闭开关
  this.show = true
  this.$refs.input.$el.querySelector('input').focus()
  ...
}

问题：实际开发中发现，因为组件是动态渲染的，mousedownEvent事件中没法直接获取到当前对象的dom元素this.$refs.xxx，致使自动聚焦失败。

3.5 实现方案

在方案4的基础上，使用nextTick异步更新队列可以解决dom渲染时序问题，具体实现针对方案4稍做修改便可。

$nextTick: 在vue官方深刻响应式原理中说明了 vue 实现响应式并非数据发生变化以后 DOM 当即变化，而是在下次 DOM 更新循环结束以后执行延迟回调，在修改数据以后使用 $nextTick，则能够在回调中获取更新后的 DOM，官方示例：<https://cn.vuejs.org/v2/guide/reactivity.html#search-query-sidebar>focusEvent () { this.show = true this.canClose = true // 聚焦时打开开关 }, blurEvent () { if (this.canClose) { this.show = false // 只有开关打开时才执行关闭 } }, mousedownEvent (key) { this.canClose = false // 点击提示选项，关闭开关 this.show = true this.$nextTick(() => { this.$refs.input.$el.querySelector('input').focus() }) ... }4. 组件数据双向绑定

为了方便组件内数据的处理，传入组件的输入值value会首先被split分解为key数组，而后添加watcher观察器，监听输入值的变化，更新提示框的选中状态，并经过$emit方法同步到父组件中，实现数据的双向绑定，输入值的watch以下所示：

watch: {
  inputVal: {
    handler () {
      let selectArray = this.inputFilter()
      this.inputVal = selectArray.join(this.seperator)
      // 更新选中状态
      this.updateActive()
      // 同步数据
      this.$emit('update:value', this.inputVal) // 可改成v-model
    },
    immediate: true
  }
}

5. 组件应用与改进

带提示框的单选/多选文本框组件的应用场景较多，典型的场景如封装企业联系人的选择器，用户输入用户名关键词，提示框显示相关联系人，同时容许用户自由输入用户名。

组件还有很多能够改进的地方，例如：

1. 目前的设计经过监听mousedown来阻止提示框的关闭，很明显不能兼容移动端，能够考虑添加touch事件；
2. 在css布局方面没有判断用户可见的友好性，在极端状况下可能会超出屏幕范围；
3. 还不支持slot插槽和动态设置class等。

随着总体项目的迭代能够逐步完善。

此文已由做者受权腾讯云+社区发布