vue.js3:div上添加右键菜单(vue@3.2.37)
Vue 添加 菜单 div 3.2 右键 37 js3
2023-09-14 09:01:15 时间
一,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
相关文章
- 一比一手写迷你版vue,彻底搞懂vue运行机制
- 人类高质量vue学习笔记(五)
- (踩坑篇)vue element-ui resetForm()表单重置失效的问题
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- Vue笔记(11) vue-router
- vue快速入门---高速版
- vue链接转二维码_vue二维码识别
- vue源码分析-从new Vue开始
- 你知道import Vue from 'vue' 吗?
- Vue格式化时间显示样式
- 参考element源码用vue写一个input的受控组件
- 尤雨溪回答-为什么Vue在国际上越来越没影响力?
- 用了vue还需要jquery吗_vue与react的区别
- vue页面强制刷新缓存不清除_vuex刷新页面数据
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- vue解决跨域的几种办法_前端跨域解决方案
- Vue-Router根据用户权限添加动态路由(侧边栏菜单)
- 一份vue面试知识点梳理清单
- 今天讲vue讲解专栏里的VUE组件
- 由浅入深读透vue源码:diff算法
- vue-cli3项目搭建配置以及性能优化
- IDEA安装Vue插件后为什么创建.vue文件不显示vue图标
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- Vue框架下的Redis调用实战(vue调用redis)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- Vue应用中部署Redis(vue中使用redis)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)