当前位置：首页 > VUE

vue实现高亮

2026-01-12 17:54:59VUE

Vue 实现文本高亮的方法

在 Vue 中实现文本高亮可以通过多种方式完成，以下是几种常见的方法：

方法一：使用 v-html 和字符串替换

通过字符串替换将匹配的关键词包裹在 <span> 标签中，并设置样式类。注意使用 v-html 时需要确保内容安全，避免 XSS 攻击。

<template>
  <div v-html="highlightedText"></div>
</template>

<script>
export default {
  props: ['text', 'keyword'],
  computed: {
    highlightedText() {
      if (!this.keyword) return this.text;
      const regex = new RegExp(this.keyword, 'gi');
      return this.text.replace(regex, match => `<span class="highlight">${match}</span>`);
    }
  }
};
</script>

<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>

方法二：使用组件和插槽

创建一个可复用的高亮组件，通过插槽传递文本内容，组件内部处理高亮逻辑。

<template>
  <span>
    <slot></slot>
  </span>
</template>

<script>
export default {
  props: ['keyword'],
  mounted() {
    this.highlight();
  },
  methods: {
    highlight() {
      if (!this.keyword) return;
      const text = this.$el.textContent;
      const regex = new RegExp(this.keyword, 'gi');
      const highlighted = text.replace(regex, match => `<span class="highlight">${match}</span>`);
      this.$el.innerHTML = highlighted;
    }
  }
};
</script>

方法三：使用自定义指令

创建一个自定义指令，直接在元素上应用高亮效果。

Vue.directive('highlight', {
  inserted(el, binding) {
    const keyword = binding.value;
    if (!keyword) return;
    const text = el.textContent;
    const regex = new RegExp(keyword, 'gi');
    el.innerHTML = text.replace(regex, match => `<span class="highlight">${match}</span>`);
  },
  update(el, binding) {
    const keyword = binding.value;
    if (!keyword) return;
    const text = el.textContent;
    const regex = new RegExp(keyword, 'gi');
    el.innerHTML = text.replace(regex, match => `<span class="highlight">${match}</span>`);
  }
});

方法四：使用第三方库

如果需要更复杂的高亮功能，可以使用第三方库如 mark.js。

import Mark from 'mark.js';

export default {
  mounted() {
    const markInstance = new Mark(this.$el);
    markInstance.mark(this.keyword, {
      className: 'highlight'
    });
  }
};