項目中實現選中一個文本的部分文字，並右鍵出現自定義操作（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)

　　　　}

}

遺留問題：

在非限定區域，鼠標右鍵也可以顯示自定義菜單。

要求：僅在要求的區域內，選擇文本后右鍵出現自定義菜單。