关于在vue2中自定义右键弹窗

        所需变量

    // 右键点击的弹框对象
      rightDialogbox: null,
      // 鼠标点击后获取的文本
      chooseText: '',
      // 弹窗的偏移
      left: '',
      top: '',
      // 右键点击的弹框显隐
      rightDialogShow: false,

一、阻止原生事件发生

        第一步我们先要在所需的div范围中阻止原生右键事件的发生

        此处有两个事件：

        @contextmenu.prevent="openMenu($event)"  获取右键点击事件

        @mouseup="handleMouseSelect"   获取选中的文本

<div class="talk-info-text" @contextmenu.prevent="openMenu($event)"           @mouseup="handleMouseSelect">
</div>

  // 右键点击事件
  openMenu(e){
    this.rightDialogShow = true
      this.top = e.pageY;
      this.left = e.pageX;
  },

 // 获取鼠标选中的文本
    handleMouseSelect() {
		this.chooseText = window.getSelection().toString()
	},

二、编写右键弹框

        这里除了剪切、复制、粘贴，我主要是做了一些特定的功能(这里暂时忽略)

<div class="right-dialogbox" :style="{left:left-60+'px',top:top-100+'px'}" id="rightDialogbox" ref="rightDialogbox" v-show="rightDialogShow">
      <div class="right-dialogbox-item" @click="cutStr">剪切</div>
      <div class="right-dialogbox-item">复制</div>
      <div class="right-dialogbox-item">粘贴</div>
      <div v-if="form.content[0].title">
      <div class="right-dialogbox-item" v-for="(item,index) in form.content" :key="index" @click="copyToContent(index)">粘贴到{{item.title}}</div>
 </div>

三、编写剪切、复制、粘贴等自定义功能

    // 粘贴文本
    pasteToText(val){
      // 现代浏览器自带api
      navigator.clipboard.writeText(val);
    },
    // 剪切一段文本
    cutStr(){
      let index = this.talkInfo.indexOf(this.chooseText)
      let lastIndex = this.talkInfo.indexOf(this.chooseText[-1])
      this.talkInfo = this.talkInfo.substring(index,lastIndex)
    },
    // 复制到内容中
    copyToContent(index){
      this.form.content[index].content += this.chooseText;
      this.chooseText = '';
    },