怎么样网站吸引人,天天向上做图网站,在线网站制作,石家庄区号参考代码#xff1a;实现Vue3Element-Plus(tree、table)右键菜单组件
这篇文章的代码确实能用#xff0c;但是存在错误#xff0c;修正后的代码#xff1a;
templatediv styletext-align: rightel-icon size12 color#…参考代码实现Vue3Element-Plus(tree、table)右键菜单组件
这篇文章的代码确实能用但是存在错误修正后的代码
templatediv styletext-align: rightel-icon size12 color#999 stylecursor: pointerPlus //el-icon/divel-tree:datacatalogTreeData:props{ label: label, children: children }:expand-on-click-nodefalserefdeptTreeRefnode-keyidhighlight-currentdefault-expand-allnode-contextmenurightClick/div classrightMenu v-showshowMenuulli v-for(menu, index) in menus clickmenu.click :keyindexel-iconcomponent :ismenu.icon //el-iconspan stylemargin-left: 10px{{ menu.name }}/span/li/ul/div
/template
script langts setup
import { FolderAdd, Message, Plus, UserFilled } from element-plus/icons-vue
import { markRaw } from vue
const showMenu ref(false)const menus ref{icon: anyname: stringclick: () void}[]
([])const catalogTreeData [{label: Level one 1,children: [{label: Level two 1-1,children: [{label: Level three 1-1-1}]}]},{label: Level one 2,children: [{label: Level two 2-1,children: [{label: Level three 2-1-1}]},{label: Level two 2-2,children: [{label: Level three 2-2-1}]}]},{label: Level one 3,children: [{label: Level two 3-1,children: [{label: Level three 3-1-1}]},{label: Level two 3-2,children: [{label: Level three 3-2-1}]}]}
]// 右击方法
const rightClick (event: MouseEvent, data: any, node: any, json: any) {event.preventDefault()showMenu.value false// 显示位置let menuPosition document.querySelector(.rightMenu) as HTMLElementif (menuPosition) {menuPosition.style.left event.clientX pxmenuPosition.style.top event.clientY px}menus.value [{icon: markRaw(FolderAdd), // 默认图标name: 新增子目录, // 默认名称click: () {console.log(新增子目录)}},{icon: markRaw(Message),name: 编辑,click: () {console.log(编辑)}},{icon: markRaw(UserFilled),name: 删除,click: () {console.log(删除)}}]showMenu.value truedocument.addEventListener(click, close)
}function close() {showMenu.value false
}
/script
style scoped
.rightMenu {position: fixed;z-index: 99999999;cursor: pointer;border: 1px solid #eee;box-shadow: 0 0.5em 1em 2px rgba(0, 0, 0, 0.1);border-radius: 6px;color: #606266;font-size: 14px;background: #fff;
}.rightMenu ul {list-style: none;margin: 0;padding: 0;border-radius: 6px;
}.rightMenu ul li {padding: 6px 10px;border-bottom: 1px solid #c8c9cc;box-sizing: border-box;display: flex;align-items: center;justify-content: flex-start;
}.rightMenu ul li:last-child {border: none;
}.rightMenu ul li:hover {transition: all 0.5s;background: #ebeef5;
}
.rightMenu ul li:hover {transition: all 0.5s;background: #ebeef5;
}.rightMenu ul li:first-child {border-radius: 6px 6px 0 0;
}
.rightMenu ul li:last-child {border-radius: 0 0 6px 6px;
}
/style
