给v-model绑定的input框的文本内容根据搜索关键字高亮方法

标题接到一个令人抓狂的需求：

在搜索框输入关键字搜索时，搜索的结果需要对该关键字做匹配并高亮显示，这是非常简单的。然而给我的需求并不是这么简单的，而是需要input的输入框的文本高亮，这里是用了elementUI 的el-cascader级联选择器，
其实el-cascader的底层就是一个input。
直接上最终效果

一开始就想用过滤器实现，vue1.0支持过滤器，2.0取消了，官网说用computed，个人理解这里使用computed就需要定义get和set方法，否则双向绑定就会失效，这对于大数据量的时候无疑是行不通的，于是调整思路

解决思路：
过滤器行不通，那就用指令实现之
1、自定义指令获取绑定指令的node节点
2、正则匹配需要高亮的文本，用标签包裹，里写样式
3、将该节点的innerHTML =

思路有了，直接上代码：

Vue.directive('highlight', {
        // 这里的 el 就是被注册指令的 node 节点， binding 就是节点信息，
        // 包括一个 value，就是传进来的数据
        // vnode 就是 vue 虚拟节点
        //  刚刚注册这个事件，就使用 bind
        bind(el, binding, vnode) {
          const {
            value
          } = binding;
          if (value && typeof value === 'object') {
            const {hWord, word} = value;
            el.innerHTML = word.replace(new RegExp(hWord, 'ig'), (a) => {
              return `${a}`
            });
          }
        },
        // 绑定的数据更新了，执行 update
        update(el, binding, vnode) {
          const {
            value
          } = binding;
          if (value && typeof value === 'object') {
            const {hWord, word} = value;
            el.innerHTML = word.replace(new RegExp(hWord, 'ig'),
                (a) => `${a}` );
          }
        }
      })

指令使用：
在需要高亮的地方直接使用，传入一个对象参数
v-highlight="{hWord:搜索关键字, word: 需要被高亮的文本}"
这样就实现input的文本高亮了(el-selet,普通input)同理

但是由于我这里是使用里el-cascader，以上的代码虽然是实现里，但是指令中使用里innerHTML，会将组件的icon覆盖掉了，我想了一个比较挫的解决办法

就是在组件的外面用一层div包裹，在该div上使用指令，将组件的input的height设为0，其实就是隐藏了input。

到此大功告成。。。