当前位置：首页 > VUE

vue实现文本标注

2026-02-11 09:31:54VUE

Vue实现文本标注的方法

文本标注通常用于高亮、标记或注释特定文本内容。在Vue中可以通过以下几种方式实现：

使用v-html指令动态渲染带标签的文本

通过v-html指令可以将包含HTML标签的字符串渲染为DOM元素：

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

<script>
export default {
  data() {
    return {
      originalText: '这是一段需要标注的文本',
      highlightedText: '这是一段<mark>需要标注</mark>的文本'
    }
  }
}
</script>

使用计算属性动态生成标注内容

对于更复杂的标注逻辑，可以使用计算属性：

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

<script>
export default {
  data() {
    return {
      text: 'Vue是一款流行的前端框架',
      keywords: ['Vue', '前端']
    }
  },
  computed: {
    highlightKeywords() {
      let result = this.text
      this.keywords.forEach(word => {
        const regex = new RegExp(word, 'g')
        result = result.replace(regex, `<mark>${word}</mark>`)
      })
      return result
    }
  }
}
</script>

使用第三方库

对于更专业的文本标注需求，可以考虑以下库：

Mark.js：轻量级文本标记库
Rangy：提供更复杂的文本选择和高亮功能

安装Mark.js示例：

npm install mark.js

使用示例：

<template>
  <div ref="content">
    这是一段包含多个关键词的文本，Vue很好用，JavaScript也很强大。
  </div>
  <button @click="highlight">高亮关键词</button>
</template>

<script>
import Mark from 'mark.js'
export default {
  methods: {
    highlight() {
      const instance = new Mark(this.$refs.content)
      instance.mark(['Vue', 'JavaScript'], {
        className: 'highlight'
      })
    }
  }
}
</script>

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

实现交互式标注

要实现用户可交互的标注功能，可以结合鼠标事件：

<template>
  <div 
    @mouseup="handleSelection"
    ref="textContainer"
  >
    选择这段文本中的部分内容试试
  </div>
</template>

<script>
export default {
  methods: {
    handleSelection() {
      const selection = window.getSelection()
      if (!selection.toString().trim()) return

      const range = selection.getRangeAt(0)
      const span = document.createElement('span')
      span.className = 'annotation'
      span.textContent = selection.toString()

      range.deleteContents()
      range.insertNode(span)
      selection.removeAllRanges()
    }
  }
}
</script>

<style>
.annotation {
  background-color: #ffeb3b;
  cursor: pointer;
}
</style>