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 
                        
关键字：