一键标注，Vue3 + mark.js 让你轻松标记文字！

前端

2023-06-20 03:12:12

Vue3 + mark.js：提升前端文字标注效率

在前端开发中，对文字进行标注是一项常见的任务，例如高亮、下划线、删除线等。然而，逐个手动标注不仅耗时费力，而且容易出错。本文将介绍如何使用 Vue3 和 mark.js 无缝集成，轻松实现文字标注功能。

Vue3 + mark.js 概述

Vue3

Vue3 是一个渐进式的 JavaScript 框架，以其轻量、快速和灵活性而闻名。它提供了构建响应式和高效的前端应用程序所需的一切工具。

mark.js

mark.js 是一个 JavaScript 库，专门用于文字标注。它支持多种标注样式，包括高亮、下划线和删除线。mark.js 还允许自定义标注的颜色和样式，提供极高的灵活性。

集成 Vue3 和 mark.js

1. 安装依赖项

npm install vue3 mark.js

2. 在 Vue3 项目中使用

在 Vue3 项目中，可以使用以下代码实现文字标注功能：

import { createApp } from 'vue'
import Mark from 'mark.js'

const app = createApp({
  data() {
    return {
      text: '这是一段文字',
      markOptions: {
        element: 'span',
        className: 'mark',
        acrossElements: true,
      },
    }
  },
  mounted() {
    const markInstance = new Mark(this.$refs.text, this.markOptions)
    markInstance.mark('前端')
  },
})

app.mount('#app')

在这个代码片段中：

我们创建了一个 Vue3 实例。
在 data 函数中，我们定义了要标注的文本和标注选项。
在 mounted 函数中，我们创建了一个 mark.js 实例并标注了指定的文本。

自定义标注样式

mark.js 提供了广泛的选项来自定义标注样式。可以通过修改 markOptions 数据来实现。

const markOptions = {
  element: 'span', // 标注元素
  className: 'mark', // 标注样式类
  acrossElements: true, // 是否跨越元素进行标注
  accuracy: 'complementary', // 标注精度
  exclude: ['a', 'strong', 'em', 'code'], // 排除元素
  separateWordSearch: false, // 单词搜索模式
  diacritics: false, // 重音符号
  ignoreJoiners: false, // 连接符
  done: function () {}, // 完成回调
  noMatch: function () {}, // 无匹配项回调
}