实例-Vue中使用右键菜单之@xunleivue-context-menu组件的使用

实例-Vue中使用右键菜单之@xunlei/vue-context-menu组件的使用

npm地址——https://www.npmjs.com/package/@xunlei/vue-context-menu

效果

1、安包

npm install @xunlei/vue-context-menu

2、代码

index.vue

<template><div id="dataPage"><el-tree :data="treeData" id="el-tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree><VueContextMenu class="right-menu" :target="contextMenuTarget" :show="contextMenuVisible"@update:show="(show) => contextMenuVisible = show"><a href="javascript:;" @click="createDatabaseOrTable">新建{{ this.menuLabel }}</a><a href="javascript:;" @click="deleteDatabaseOrTable">删除{{ this.menuLabel }}</a><a href="javascript:;" @click="attribute">属性</a><a href="javascript:;" @click="exportDatabaseOrTable">导出{{ this.menuLabel }}</a></VueContextMenu></div>
</template><script>
// 直接在组件中引入使用
import { component as VueContextMenu } from '@xunlei/vue-context-menu'export default {components: { VueContextMenu },data() {return {treeData: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]},],contextMenuTarget: null,contextMenuVisible: false,nodeData: { },defaultProps: {children: "children",label: "label",},}},
mounted() {this.$nextTick(() => {// vue-context-menu 需要传入一个触发右键事件的元素，等页面 dom 渲染完毕后才可获取this.contextMenuTarget = document.querySelector('#el-tree')// 获取所有的 treeitem，循环监听右键事件const tree = document.querySelectorAll('#el-tree [role="treeitem"]')tree.forEach(i => {i.addEventListener('contextmenu', event => {// 如果右键了，则模拟点击这个treeitemevent.target.click()})})})
},computed: {menuLabel() {return this.nodeData.children == null ? '表' : '数据库';}
},methods: {handleNodeClick(data) {// console.log(data)this.nodeData = data},createDatabaseOrTable() {this.contextMenuVisible = false;console.log("create " + this.menuLabel);},deleteDatabaseOrTable() {this.contextMenuVisible = false;console.log("delete " + this.menuLabel);},attribute() {this.contextMenuVisible = false;console.log("show attribute " + this.menuLabel);},exportDatabaseOrTable() {this.contextMenuVisible = false;console.log("export " + this.menuLabel);},}
}
</script>
<style lang="scss">
html,
body {height: 100%;
}#dataPage {margin: 0 0;font-family: 'Microsoft Yahei', 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;height: 100%;
}// 右键会选中文字，为了美观将它禁用
#el-tree {user-select: none;
}.right-menu {font-size: 14px;position: fixed;background: #fff;border: solid 1px rgba(0, 0, 0, .2);border-radius: 3px;z-index: 999;display: none;
}.right-menu a {width: 150px;height: 28px;line-height: 28px;text-align: center;display: block;color: #1a1a1a;
}.right-menu a:hover {background: #eee;color: #fff;
}.right-menu {border: 1px solid #eee;box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, .1);border-radius: 1px;
}a {text-decoration: none;
}.right-menu a {padding: 2px;
}.right-menu a:hover {background: #99A9BF;
}
</style>

实例-Vue中使用右键菜单之@xunleivue-context-menu组件的使用相关推荐

vue中，右键菜单组件v-contextmenu的使用
vue中,右键菜单组件v-contextmenu的使用 1.效果右键菜单之禁用和子菜单 2.流程第一步:安包 npm install v-contextmenu --save-dev npm in ...
在(CListView)列表视图中添加右键菜单的方法
使用弹出式菜单(PopMenu) 弹出式菜单(PopMenu)大家都熟悉,在WIN98的桌面上单击鼠标右键弹出的菜单就是弹出式菜单.通常情况下,弹出式菜单在鼠标右键单击时弹出,当然,也可以根据需要 ...
WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法
WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法原文:WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法问题描 ...
WPF中的右键菜单ContextMenu
WPF中的右键菜单主要是通过ContextMenu来实现,ContextMenu的使用有两种方式一..在Resources中声明,在控件中使用. 1.在Resources中添加ContextMenu ...
Element组件引发的Vue中mixins使用，写出高复用组件
我们都知道 Vue 采用的是一种组件化开发模式,组件在 Vue 中一个非常重要的核心概念.每个组件都是一个完整的实例,组件的创建,组件间的通讯,组件如何更好的复用,以及整个的生命周期的钩子.所以你会发 ...
Vue中两个让你幸福感爆棚的组件导入小技巧之require.context
前言小伙伴们大家好,在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V(独家总结)中我们已经学习了一个注册全局组件的小技巧,使得我们在注册大量全局组件时不再被Vue.u ...
关于JFace中的右键菜单Action类,ActgionGroup类,MenuManager类
Action类,ActionGroup类,MenuManager类介绍 SWT中菜单是Menu类,菜单项用MeauItem类来实现.但是在实际开发中,同一种功能会有多中表现形式, 例如:Eclipse ...
html模拟右键系统菜单,HTML中自定义右键菜单功能
我们使用的应用系统很多都有右键菜单功能.但是在网页上面,点击右键一般显示的却是IE默认的右键菜单,那么我们如何实现自己的右键菜单呢?下面将讲解右键菜单功能的实现原理和实现代码. 实现原理在HTML语 ...
easyui datagrid中添加右键菜单事件
//HTML中代码 <div id="menu" class="easyui-menu" style="width:150px;"& ...

实例-Vue中使用右键菜单之@xunleivue-context-menu组件的使用

实例-Vue中使用右键菜单之@xunlei/vue-context-menu组件的使用

实例-Vue中使用右键菜单之@xunleivue-context-menu组件的使用相关推荐

最新文章

热门文章