Vue关键词高亮组件

本组件应用于Vue项目中搜索面板搜索关键词时的关键词高亮展示，组件比较简单，直接上代码吧

template：

<template>
    <span class="keywords-text-container">
      <span class="keywords-box" v-html="realText"></span>
    </span>
</template>

script:

export default {
    name: "KeywordsText",
    props: ["keywords", "text"],
    computed: {
      realText() {
        let reg = new RegExp(this.keywords, 'ig');
        return this.text.replace(reg, (keyword) => {
          return `<span class="keywords-item">${keyword}</span>`
        });
      }
    },
  }

less:

.keywords-item {
   color: #bf3f4a;
   font-weight: bold;
}

示例项目