<template> <el-container style="height: 630px"> <el-aside width="300px"> <el-tree :data="productTypes" :props="defaultProps" node-key="id" @node-contextmenu="rightClick" @node-click="handlClick"> </el-tree> <div v-show="menuVisible"> <ul id="menu" class="menu"> <li class="menu_item" @click="">加载</li> <li class="menu_item" @click="">新增</li> <li class="menu_item" @click="">配置</li> <li class="menu_item" @click="">删除</li> <li class="menu_item" @click="">关闭</li> </ul> </div> </el-aside> <el-main> </el-main> </el-container> </template> <script> export default { data() { return { menuVisible: false, productTypes: [], defaultProps: { children: 'children', label: 'name' } } }, methods: { //加载树的数据 loadTreeData() { this.$http.get("/product/productType/tree").then((res) => { this.productTypes = res.data; }) }, handlClick() { }, //右键点击 rightClick(MouseEvent, object, Node, element) { // 鼠标右击触发事件 this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true this.menuVisible = true // 显示模态窗口，跳出自定义菜单栏 var menu = document.querySelector('#menu') document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法 menu.style.display = "block"; menu.style.left = MouseEvent.clientX - 0 + 'px' menu.style.top = MouseEvent.clientY - 80 + 'px' }, foo() { // 取消鼠标监听事件 菜单栏 this.menuVisible = false document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了 }, }, mounted() { this.loadTreeData(); } } </script> <style scoped> .el-aside { border: 1px solid #ccc; border-right: none; } .el-main { border: 1px solid #ccc; } .menu_item { line-height: 20px; text-align: center; } .menu { width: 50px; z-index: 99999; position: absolute; border-radius: 5px; border: 1px solid #; background-color: #f4f4f4; } li:hover { background-color: #1790ff; color: white; } li{ font-size:13px } </style> 
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11191.html