vue-web-highlights v0.4.0

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 方法: | 参数名 | 类型 | 描述 | 是否必须 | | --------- | -------- | ---------------------- | -------- | | node | INoteTextHighlightInfo | 用于设置原生选中文本的方法 | 是 |