vue划词右键展示自定义菜单，与划词文字高亮

在项目中需要更改文字划动之后的右键自定义功能。利用到了两个插件

1.vue-context-menu

第一步先来说vue-context-menu

这个是为了右键展示自定义菜单，先来安装

1.1

npm install vue-contextmenu --save

1.2.在main.js里面引入

import VueContextMenu from 'vue-contextmenu'
Vue.use(VueContextMenu)

1.3.在组件中使用。首先需要在div盒子中添加@contextmenu='showMenu'

1.4.在界面中使用vue-context-menu

 1.5.data return中返回数据

contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: "demo",
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,
          y: null
        },
        // Menu options (菜单选项)
        menulists: [
          {
            fnHandler: "copyData", // Binding events(绑定事件)
            btnName: "复制" // The name of the menu option (菜单名称)
          },
          {
            fnHandler: "retrievalData",
            btnName: "检索"
          },
          {
            fnHandler: "EncyclopediasData",
            btnName: "百科"
          },
          {
            fnHandler: "feedbackData",
            btnName: "反馈"
          }
        ],
      },

ps：fnHandler为绑定的事件自定义名字在第四步的标签中写入即可

1.6.methods中方法

        1.6.1打开menu菜单

        

showMenu() {
      console.log(event)
      let menu = this.$refs.msgRightMenu
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      this.contextMenuData.axis = {
        x,
        y
      };

    },

        1.6.2在data return中的fnHandler的方法，写入这里我标了一个来做例子，写在methods中哦

 具体实现效果如下

这时候右键自定义菜单就可以了 ;

2.文本选择后高亮

        2.1.web-highlighter

        同样也是先安装

        

npm i web-highlighter

        2.2在main.js里面引入进去

import Highlighter from 'web-highlighter';
window.highlighter = new Highlighter()

        2.3在组件中使用和引入

        首先需要引入进来

import Highlighter from 'web-highlighter';//高亮(页面中引入)

        给需要的高亮的盒子增加一个ref直接操作dom

        

        在data中定义接收

      highlighter:null,

        在mounted里面使用

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

    highlighter.run()

        ps：最重要的一步一定要让他运行

        在给这个类名添加样式

        

<style>
.highlight-wrap-hover{
  background: #ccc;
  color: #AC4B38;
}
</style>

这样基本就全部结束了来看一下效果