Vue—-right-click pop-up menu (vue-contextmenu)_vue right-click pop-up menu_VIVI Xiao’s blog

class=”markdown_views prism-atom-one-dark”> Requirements: Right-click, pop-up menu, query information, find vue-contextmenu. Project address: https://github.com/chIIC/vue-contextmenu Installation: npm install vue-contextmenu –save Introduction: import VueContextMenu from ‘vue-contextmenu’ Vue.use(VueContextMenu) Use: 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 { // menu data contextMenuData: { menuName: ‘demo’, //The position where the menu is displayed axis: { x: null, y: null }, //menu options menulists: [{ fnHandler: ‘home’, //binding event icoName: ‘fa fa-home fa-fw’, //icon icon btnName: ‘Back to the home page’ //menu name }, { fnHandler: ‘deletedata’, icoName: ‘fa fa-minus-square-o fa -fw’, btnName: ‘Delete Layout’ }] } }, methods: { showMenu () { event.preventDefault() var x = event.clientX var y = event.clientY // Get the current location this.contextMenuData.axis = { x, y } }, home () { alert(“home page”) }, deletedata () { console.log(‘delete!’) } } } /script