Vue 函数自定义指令进行 文本高亮

之前对文本进行高亮总是需要一些很多操作，但是使用了指令之后，就会发现变得很简单

// 注册指令
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 `<span class="height-light">${a}</span>`
      });
    }
  },
  // 绑定的数据更新了，执行 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) => `<span class="height-light">${a}</span>` );
    }
  }
});

<!-- 使用指令 由于 css 过于简单，这里就不写了 -->
<div v-if="showSearchList.length > 0">
      <div class="custom-search-list-bar" 
        :key="item.label"
        @click="handleTo(item)"
        v-for="item in showSearchList">
        <div class="custom-search-title" v-highlight="{hWord: searchv, word: item.label}">
          <span class="custom-cell-text"></span>
        </div>
      </div>
   </div>

使用方法 就是   v-heighlight

v-指令名称