鼠标右键设置

现在的功能已经不满足左键了 所以又开发了 右键的功能，从网上看了看 ，ok 调用什么api接口，然后开始写代码

这就是右键的一些功能 然后点击里面的按钮会触发各自的接口

<el-row class="btm-tree" @contextmenu.native.prevent="showMenu($event)">
            <el-row class="box-shubiao" v-show="rightClickPosition.show" :style="{top: rightClickPosition.top+'px', left: rightClickPosition.left+'px'}">
              <el-row>
                <el-button type="text" @click.prevent="addRootFile">计算</el-button>
              </el-row>
              <el-row>
                <el-button type="text" @click.prevent="addRootFile">锁定</el-button>
              </el-row>
              <el-row>
                <el-button type="text" @click.prevent="addRootFile">刷新</el-button>
              </el-row>
              <el-row>
                <el-button type="text" @click.prevent="addRootFile">查看结果</el-button>
              </el-row>
              <el-row>
                <el-button type="text" @click.prevent="addRootFile">试算</el-button>
              </el-row>
              <el-row>
                <el-button type="text" @click.prevent="addRootFile">编辑</el-button>
              </el-row>
              <el-row>
                <el-button type="text" @click.prevent="addRootFile">删除</el-button>
              </el-row>
            </el-row>
  </el-row>

看代码里面最重要的就是 @contextmenu.native.prevent 它可以阻止你右键的出现 然后你就可以自己设置 右键的样式 和 功能

调用这个方法就可以使你的样式出现 然后设置 功能
 showMenu(event, data) {
      if (event && event.stopPropagation) {
        // 因此它支持W3C的stopPropagation()方法
        event.stopPropagation()
      }
      else {
        // 否则，我们需要使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true
      }
      // 控制是否显示
      this.rightClickPosition.show = true
      // 位置
      this.rightClickPosition.left = event.pageX - 30
      this.rightClickPosition.top = event.pageY - 30
    }
 // 然后在的最外层的盒子设置一个点击事件让他点击空白的地方消失
 hideMenu() {
      this.rightClickPosition.show = false
 } 

标签：功能,鼠标,rightClickPosition,点击,右键,设置,stopPropagation,event
来源： https://blog.csdn.net/m0_46698766/article/details/120331323