vue+"web-highlighter"实现高亮笔记/web荧光笔

web页面高亮效果是一个很有趣，并且外行人第一印象特别厉害的特效，应用的场景比较少，网上没查到几个案例，以下为 web-highlighter插件实现过程

web-highlighter 的github地址

高亮笔记到底展示了个啥效果？
点击下方的蓝色按钮选择“政治术语”，使用鼠标选中左侧文章中的某一段话，文本将以闪亮的背景颜色突出显示，下次访问时，突出显示的区域将被保存并恢复。

一、安装，引用，初始化

npm i web-highlighter
import Highlighter from 'web-highlighter';

1、全局使用的话放在 main.js 里初始化

window.highlighter = new Highlighter()

2、单独使用的话在页面里初始化

const highlighter = new Highlighter() 

二、使用方法 （参数设置参照 API）
1、初始化荧光笔实例
先创建一个div

 <div ref="headLine"> // 或 <div id="headLine">
      会上，国家发展改革委汇报了西部开发进展等情况。西部各省区市政府负责同志发了言。
      <strong>
        我是 strong 标签
      </strong>
<div>

（1）最简单的初始化

const highlighter = new Highlighter() //初始化

（2）带参数限制的初始化

const highlighter = new Highlighter({
        $root: this.$refs.headLine, // 或document.getElementById('headLine')
        exceptSelectors: ['strong'],
        style: {
            className: 'highlight-wrap'
        }
});

2、.on() 侦听器处理交互效果

highlighter
    .on('selection:hover', ({id}) => {
        // hover 时增加 Class
        highlighter.addClass('highlight-wrap-hover', id);
    })
    .on('selection:hover-out', ({id}) => {
        // hover 失去焦点时移除 Class,
        highlighter.removeClass('highlight-wrap-hover', id);
    })
    .on('selection:create', ({sources}) => {
        sources = sources.map(hs => ({hs}));
        // save to backend
        store.save(sources);
    });