标签：功能 鼠标 rightClickPosition 点击 右键 设置 stopPropagation event

现在的功能已经不满足左键了 所以又开发了 右键的功能，从网上看了看 ，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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。