文章目录
*Vue实现右键菜单(vue-contextmenu模块)*一、关于右键点击事件二、实现右键菜单1.引入vue-contextmenu模块2.在main.js中引入该模块3.相关代码4.开始测试 总结Vue实现右键菜单(vue-contextmenu模块)
一、关于右键点击事件
1:右键时,不阻止浏览器行为
<div style="width: 100px;height: 100px;background-color: #5daf34;float: left"></div>
2:右键时,阻止浏览器行为
<div @contextmenu style="width: 100px;height: 100px;background-color: blueviolet;float: left"></div>
3:右键时,阻止浏览器行为,并调用相关方法
<div @contextmenu.prevent="show" style="width: 100px;height: 100px;background-color: lightcoral;float: left"></div>
methods: {show() {this.$message({type: "info", message: "右键点击事件"})}}
二、实现右键菜单
1.引入vue-contextmenu模块
npm install vue-contextmenu --save
2.在main.js中引入该模块
// 右键点击事件(右键生成菜单)import VueContextMenu from 'vue-contextmenu'Vue.use(VueContextMenu);
3.相关代码
1:template标签
<div style="background-color: #66b1ff;width: 700px;height: 100px;margin-top: 70px">右键弹出菜单<el-table :data="tableData" style="width: 100%"><el-table-column prop="id" label="编号" width="90"><template slot-scope="scope"><div @contextmenu.prevent="contextMenu($event,scope.row.id)">{{scope.row.id}}</div></template></el-table-column><el-table-column prop="date" label="日期" width="180"><template slot-scope="scope"><div @contextmenu.prevent="contextMenu($event,scope.row.id)">{{scope.row.date}}</div></template></el-table-column><el-table-column prop="name" label="姓名" width="180"><template slot-scope="scope"><div @contextmenu.prevent="contextMenu($event,scope.row.id)">{{scope.row.name}}</div></template></el-table-column><el-table-column prop="address" label="地址"><template slot-scope="scope"><div @contextmenu.prevent="contextMenu($event,scope.row.id)">{{scope.row.address}}</div></template></el-table-column></el-table></div>
<vue-context-menu :contextMenuData="contextMenuData" @insertData="insertData" @deleteData="deleteData"@saveData="saveData" @downloadData="downloadData"></vue-context-menu>
2:script标签
data() {return {contextMenuData: {// 菜单名称menuName: "rightMenu",// 菜单显示的坐标位置axis: {x: null,y: null},// 菜单选项menulists: [{// 绑定事件fnHandler: "insertData",// icon图标icoName: "el-icon-plus",// 菜单选项名称btnName: "新增数据"},{// 绑定事件fnHandler: "deleteData",// icon图标icoName: "el-icon-close",// 菜单选项名称btnName: "删除数据"},{// 绑定事件fnHandler: "saveData",// icon图标icoName: "el-icon-check",// 菜单选项名称btnName: "保存数据"},{// 绑定事件fnHandler: "downloadData",// icon图标icoName: "el-icon-download",// 菜单选项名称btnName: "下载数据"}]},tableData: [{id: '001',date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id: '002',date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {id: '003',date: '-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {id: '004',date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}
methods: {insertData() {// 新增数据this.$message({type: "info", message: "新增数据"});},deleteData() {// 删除数据this.$message({type: "info", message: "删除数据"});},saveData() {// 保存数据this.$message({type: "info", message: "保存数据"})},downloadData() {// 下载数据this.$message({type: "info", message: "下载数据"})},contextMenu(e, data) {// 右键单击事件(修改菜单显示坐标)let x = e.clientX;let y = e.clientY;// Get the current locationthis.contextMenuData.axis = {x, y};this.$message({type: "info", message: "编号:" + data});}}
3:style标签
<style scoped>.vue-contextmenuName-rightMenu {background-color: #66b1ff !important;}/deep/ .vue-contextmenu-listWrapper .context-menu-list[data-v-1931f86e] {margin-left: -37px;}</style>
4.开始测试
总结
每天一个提升小技巧!!!
如果觉得《Vue实现右键菜单(vue-contextmenu模块)》对你有帮助,请点赞、收藏,并留下你的观点哦!