vue.js3:div上添加右键菜单(vue@3.2.37)

一,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

说明:作者:刘宏缔 邮箱: 371125307@qq.com

二,测试效果:

三,查看vue框架的版本:

root@lhdpc:/data/vue/imgtouch# npm list vue
imgtouch@0.1.0 /data/vue/imgtouch
├─┬ @vue/cli-plugin-babel@5.0.6
│ └─┬ @vue/babel-preset-app@5.0.6
│   └── vue@3.2.37 deduped
└─┬ vue@3.2.37
  └─┬ @vue/server-renderer@3.2.37
    └── vue@3.2.37 deduped 

 

posted @ 2022-11-08 15:51  刘宏缔的架构森林  阅读(209)  评论(0编辑  收藏  举报