vue.js3:div上添加右键菜单([email protected])

一，js代码：

<template>
  <div>
    <div style="width:800px;margin: auto;display: flex;flex-direction: column;">
      <div>请选择上传图片:
        <input type="file" id="back" ref="backfile" accept="image/*" @change="handleFile" /></div>
      <div id="imgContainer" style="position: relative;margin-left:150px;margin-top:10px;width:500px;height:500px;
overflow: hidden;background: lightgray;" >
        <img id="img" :src="imgSrc" style="" />
      </div>
 
      <div style="margin-left:150px;">
        <el-slider v-model="roundValue" :min="0" :max="roundMax" @input="setRounded" style="width:500px;" />
      </div>
      <div id="dpiBtn" style="display: none;">
        <input type="button" value="保存图片" @click="makeCanvas" />
      </div>
    </div>
    <!-- 自定义鼠标右键菜单 -->
    <div id="menu">
      <ul>
        <li @click="menuClick('down')">保存图片</li>
        <li @click="menuClick('about')">关于本站</li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import {ref,onMounted,nextTick} from "vue";
 
export default {
  name: "RoundedCorner",
  setup() {
    onMounted(() => {
      nextTick(()=>{
        let item = document.getElementById('imgContainer');
        item.addEventListener('contextmenu', (e) => {
          e.preventDefault();//阻止其他事件
          // 得到自定义的菜单调整位置
          let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;// 获取垂直滚动条位置
          let scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;// 获取水平滚动条位置
          //显示右键菜单
          let menu = document.getElementById('menu');
          menu.style.display = 'block';
          menu.style.left = e.clientX + scrollLeft + 'px';
          menu.style.top = e.clientY + scrollTop + 'px';
        })
      })
    })
 
    document.onclick = function () {
      document.getElementById('menu').style.display = 'none';
    }
 
   ...
 
     //右键菜单点击事件
     const menuClick = (type) => {
         if (type == 'about') {
           alert('图片工具站:twitter.com');
         } else if (type == 'down') {
           makeCanvas();
         }
     }
 
      return {
        menuClick,
      }
  }
}
</script>
 
<style scoped>
/* 自定义右键菜单 */
#menu{
  display: none;
  position: absolute;
  width: 150px;
  border:1px solid #ccc;
  background: #eee;
}
#menu ul {
  margin: 0px 0;
}
#menu li{
  height: 30px;
  line-height: 30px;
  color: #21232E;
  font-size: 12px;
  width: 150px;
  list-style: none;
  float: left;
  text-align: center;
  cursor: default;
  list-style-type: none;
  margin-left: -40px;
}
#menu li:hover {
  background-color: #cccccc;
}
</style>

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明：作者:刘宏缔 邮箱: [email protected]

二，测试效果:

三，查看vue框架的版本:

root@lhdpc:/data/vue/imgtouch# npm list vue
[email protected] /data/vue/imgtouch
├─┬ @vue/[email protected]
│ └─┬ @vue/[email protected]
│   └── [email protected] deduped
└─┬ [email protected]
  └─┬ @vue/[email protected]
    └── [email protected] deduped