项目中实现选中一个文本的部分文字，并右键出现自定义操作（vue）

实现效果如图所示：

（仅实现选中文本部分）

第一步：实现选中文本功能

　　选中文本可以使用 window.getSelection().toString()

　　方法的触发可以使用@mouseup

第二步：自定义鼠标右键功能，实现功能：对选中的文本进行匹配操作

(选中文本后右键出现自定义按钮）

　　

该功能是利用vue插件vue-context-menu

使用方法借鉴：https://www.cnblogs.com/luzt/p/11677660.html

https://blog.csdn.net/weixin_41817034/article/details/85626334

根据流程引入vue-context-menu后。

在页面加入

<span class="show-span"

      @mouseup="mytest"

      @contextmenu.prevent="rightClick">测试数据测试数据</span>

...
<vue-context-menu
            class="right-menu"
            :target="contextMenuTarget"
            :show="contextMenuVisible"
            @update:show="(show) => contextMenuVisible = show"
        >
            <a href="javascript:;" @click="write">标记</a>
        </vue-context-menu>

  data() {
    return {
　　　　contextMenuTarget: document.body,
       contextMenuVisible: false,
       copyText: ''
}}

methods:{
　　write() {},

　　　　rightClick(MouseEvent) {

　　　　　　this.copyText = window.getSelection().toString()

　　　　　　this.contextMenuVisible = false

　　　　　　if (this.copyText) {

　　　　　　　　this.contextMenuVisible = true

　　　　　　}

　　　　　　document.addEventListener('click', this.foo)

　　　　},

　　　　foo() {

　　　　　　　　this.contextMenuVisible = false

　　　　　　　　document.removeEventListener('click', this.foo)

　　　　}

}

遗留问题：

在非限定区域，鼠标右键也可以显示自定义菜单。

要求：仅在要求的区域内，选择文本后右键出现自定义菜单。