自定义鼠标右键菜单

 

鼠标右键弹出框

<template>
  <div class="conversation-item-menu box-shadow1">
    <span class="menu-item operation-text" @click.stop="openNewPage"
      >打开新页面</span
    >
  </div>
</template>

<script>
export default {
  name: 'MouseRightClick',
  data() {
    return {}
  },
  computed: {},
  methods: {
    openNewPage() {
      this.$emit('openNewPage') // 打开新页面
      this.$emit('hiddenMouse') // 关闭菜单
    },
  },
}
</script>

<style scoped lang="less">
.conversation-item-menu {
  padding: 5px;
  border-radius: 5px;
}
.box-shadow1 {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.menu-item {
  display: block;
  margin-top: 5px;
}
.operation-text {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  color: #7e7e7e;
  transition: all 0.5s ease-in;
}
.operation-text:hover {
  background-color: #e9eaec;
}
</style>

 

<!-- 鼠标右键菜单 -->
    <div class="menu-mouse" v-if="isShowMenu" :style="{'left': menuLeft + 'px', 'top': menuTop + 'px'}">
      <MouseRightClick
        @hiddenMouse="hiddenMouse"
        @openNewPage="openNewPage"
      />
    </div>


.menu-mouse {
    position: fixed;
    z-index: 1004;
    background-color: #fff;
    border-radius: 5px;
}

 

mounted() {
      document.addEventListener('click',e => {
        this.hiddenMouse()//点击其他区域关闭
      })  
  },

<duv @contextmenu.prevent.stop="showMouse($event,it)"> </div>

 

// 鼠标右键菜单关闭事件
    hiddenMouse(){
      this.isShowMenu = false
      this.conversation = {}
    },
     
    showMouse(e,item) {
      this.conversation = item
      this.isShowMenu = true
      this.menuLeft = e.pageX
      this.menuTop = e.pageY
    },
    openNewPage(){
      let routeUrl = this.$router.resolve({
        path: this.conversation.to,
      })
      window.open(routeUrl.href, '_blank')
    }