VUE实现指定内根据关键字高亮

原创已于 2023-10-30 16:05:50 修改 · 447 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2023-10-24 11:20:57 首次发布

本文介绍了如何在Vue.js中使用自定义指令实现关键字高亮功能，包括在HTML模板中的绑定、更新，以及CSS样式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、directives简介

简介可以参考官方文档地址为：

https://cn.vuejs.org/guide/reusability/custom-directives.html#directive-hooks

二、实现步骤

//html中
<div class="chat-record" v-highlight:content="keyWord">
    {{content}}
</div>


//script中
// 关键词keyword高亮
  directives: {
    highlight: {
      bind(el, binding) {
        const keyWord = binding.value;
        if(keyWord){
          const regex = new RegExp(keyWord, "gi");
          const content = el.textContent;
          el.innerHTML = content.replace(
                  regex,
                  '<span class="highlight">$&</span>'
          );
        }
      },
      update(el, binding) {
        const keyWord = binding.value;
        if(keyWord){
          const regex = new RegExp(keyWord, "gi");
          const content = el.textContent;
          el.innerHTML = content.replace(
                  regex,
                  '<span class="highlight">$&</span>'
          );
        }
      },
    },
  }

//style中
.highlight {
    color: #2878ff;
  }