右键菜单 vue手写右键菜单

**

好久没有输出文章了☺，趁着周六的雨天☔赶紧输入点，费话不多说。右键菜单来也！！

**
注意：这里只讲前半段: 右键功能

• 需求

在图片上右键设置为首图（调用接口）并做标识

• 思路分析
  1.右键事件
  2.点击位置 菜单栏 位置 样式
  3.点击菜单键外 、 滑动 (某区域外右键) 触发菜单选择后 关闭菜单
  4.如果符合你的需求看代码👇

代码

html部分

  <div v-if="rightMenu" class='rightMenu' :style="{left:left+'px',top:top+'px'}">
      <ul>
        <li @click="firstImg()">设为首图</li>
        <li @click="copyLink()">复制链接</li>
      </ul>
    </div>

javascript部分

data() {
      return {
        rightMenu: false,
        left: '',
        top: '',
       }
 },
   mounted() {
      window.addEventListener('click', this.handleScroll);
      window.addEventListener('contextmenu', this.handleScroll);
      window.addEventListener('mousewheel', this.handleScroll)
    },

  methods: {
  
       // 监听 左键  滑轮 事件  取消右键菜单
      handleScroll() {
        this.rightMenu = false;
      },
    
    // 右键
      rightClick(e) {
        this.left = e.clientX;
        this.top = e.clientY;
        // 我这里是判断区域的  我的不需要在所有地方都使用右键功能  只是在特定区域使用   // 自行更改代码
        let tagName = e.target.parentNode.firstElementChild.tagName; // 是否为img 标签内容
        if (tagName == 'IMG') {  
          this.rightMenu = true;
          return
        } else {
          this.handleScroll();
          return
        }
      },
}

css部分

  .rightMenu {
    background-color: #ffffff;
    border: 1px solid #c0c0c0;
    border-radius: 7px;
    position: fixed;
    padding: 6px 0;
  }

  .rightMenu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .rightMenu li {
    font-size: 14px;
    padding: 8px 30px;
  }

  .rightMenu li:hover {
    cursor: default;
    background-color: #eaeaea;
  }

都看👓完了，就👍1️⃣👇吧
♥ 希望帮助到你 ♥