vue中划词选中后高亮显示web-highlighter插件

web-highlighter 插件
安装：npm i web-highlighter
使用：

import Highlighter from 'web-highlighter';
const highlighter = new Highlighter({
    exceptSelectors: ['pre', 'code']
});
export default {
  name: 'wangEditor',
  data () {
    return {
    }
  },
  mounted () {
   this.initHighlighter()
  }，
  methods: {
   initHighlighter(){
	 highlighter
		//鼠标移入触发
	    .on('selection:hover', ({id}) => {
	        highlighter.addClass('highlight-wrap-hover', id);
	    })
	    //鼠标移出触发
	    .on('selection:hover-out', ({id}) => {
	        highlighter.removeClass('highlight-wrap-hover', id)
	    })
	    //创建触发
	    .on('selection:create', ({sources}) => {
	        sources = sources.map(hs => ({hs}))
	    })
	    //鼠标点击触发
	    .on('selection:click', ({ id }) => {
          this.currId = id
        })
        //根据需要可绑定其他事件
        //运行
		highlighter.run()
	  }
 	}
  }

还有很多api

highlighter.run()  //选中后自动高亮
highlighter.stop() //阻止选中后自动高亮
highlighter.removeClass('highlight-wrap-hover', id) //移除高亮显示
highlighter.remove(id)   //移除高亮节点
const selection = window.getSelection() //鼠标滑动选词
highlighter.fromRange(selection.getRangeAt(0))  //主动给选中的此添加高亮效果

想要了解更多~
官方文档：https://www.npmjs.com/package/web-highlighter