vue 右键弹出菜单
效果图
代码
这是项目里用到的,点击右键,弹出菜单,查询资料,找到vue-contextmenu
项目地址:https://github.com/chIIC/vue-contextmenu
安装:
npm install vue-contextmenu --save
引入:
import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu)
使用:
<template> <div id="app" @contextmenu="showMenu" style="width: 100px;height: 100px;margin-top: 20px;background: red;"> <vue-context-menu :contextMenuData="contextMenuData" @home="home" @deletedata="deletedata"></vue-context-menu> </div> </template> <script> export default { name: 'app', data () { return { // 菜单数据 contextMenuData: { menuName: 'demo', //菜单显示的位置 axis: { x: null, y: null }, //菜单选项 menulists: [{ fnHandler: 'home', //绑定事件 icoName: 'fa fa-home fa-fw', //icon图标 btnName: '回到主页' //菜单名称 }, { fnHandler: 'deletedata', icoName: 'fa fa-minus-square-o fa-fw', btnName: '删除布局' }] } }, methods: { showMenu () { event.preventDefault() var x = event.clientX var y = event.clientY // Get the current location this.contextMenuData.axis = { x, y } }, homed () { alert("主页") }, deletedata () { console.log('delete!') } } } </script>