0. 在线案例

点我点我

2. 安装

npm i vue-web-highlights or cnpm i vue-web-highlights

3. 使用方式

• main.js中

import {
    setSelectRange,
    globalVariable
} from "vue-web-highlights";
Vue.prototype.$setSelectRange = setSelectRange;
Vue.prototype.$globalVariable = globalVariable;

• 在vue组件中

<template>
<HighLight
        :value="data"
        :template="template"
        :modes="toolBarList"
        @onAdd="onAdd"
        :key="update"
        @onUpdate="onUpdate"
      >
        <ToolBar v-if="visible" :visible="visible" @onCancel="onToolBarCancel">
         </ToolBar>
</HighLight>
</template>
<script>
import { HighLight, ToolBar } from "vue-web-highlights";
 //  components: { ToolBar, HighLight },
</script>

5. TextHighlight 组件参数说明

• TextHighlight组件属性

  参数名	类型	描述	是否必须	默认值
  template	string	富文本 HTML 字符串	是	--
  value	INoteTextHighlightInfo[]	高亮的选区数据	否	--
  tagName	string	用于包裹高亮文本的 HTML 标签名	否	span
  onAdd	(data:INoteTextHighlightInfo)=>any	新增选区时触发的回调	否	--
  onUpdate	(data:INoteTextHighlightInfo[])=>any	选中已存在的选区时触发的回调(由于选区会有重叠，所以参数为数组列表，会返回当前标记当前选中选区的所有节点)	否	--
  rowKey	string	每条数据的唯一值	否	id
  modes	IModeProps[]	用于区分类型与不同类型设置样式	否	--

• INoteTextHighlightInfo 类型属性:

  参数名	类型	描述	是否必须
  list	INoteTextHighlightInfoItem[]	选区数据	是
  text	string	选区选中的文本数据	是
  mode	string	当前数据类型（例如：笔记，画线等）	否

• INoteTextHighlightInfoItem 类型属性:

  参数名	类型	描述	是否必须
  level	number[]	选区层级数据，依据顶级节点一层层下钻到选中文本节点	是
  start	number	当前选中的开始文本节点的偏移量	是
  end	string	当前选中的结束文本节点的偏移量	是
  text	string	当前文本节点选中的文本	是

• IModeProps 类型属性:

  参数名	类型	描述	是否必须
  mode	string	类型	是
  className	string	用于设置当前类型的类名	是

5.1 ToolBar 组件参数说明

ToolBar 需作为 TextHighlight 的子元素存在

6. 方法

setSelectRange 方法: