vue 右键菜单contextMenu

组件使用方法：

import ContextMenu from "./ContextMenu";// 为需要触发的容器绑定右键点击事件
<div class="container" @contextmenu.prevent="onContextMenu"><context-menu :context-menu-show.sync="contextShow" :config="contextConfig" @edit="onEdit"></context-menu>
</div>onContextMenu({ clientX,clientY }) {Object.assign(this,{contextConfig: {offsetLeft: clientX,offsetTop: clientY,},contextShow: true})
}

config参数示例：

contextConfig: {// 右键点击距左位置offsetLeft: 0,// 右键点击距上位置offsetTop: 0,menuList: [// 无需按键监听可以不传keyCode{label: '编辑', id: 1,des: 'E',keyCode: 69,emitType: 'edit' },{label: '删除', id: 2,des: 'D',keyCode: 68,emitType: 'del' },{label: '撤回', id: 3,des: 'R',keyCode: 82,emitType: 'return' }]
}

组件完整代码：

由于click事件与全局的mousedown和mousewheel有冲突，需要额外绑定@mousedown.stop

<template><ul class="context-menu" :style="{ left: `${config.offsetLeft}px`,top: `${config.offsetTop}px` }" v-show="contextMenuShow"><li v-for="item in menuList" :key="item.id" @mousedown.stop @click.passive="handleClick(item)"><a href="javascript:void(0)">{{ item.label }}</a><span v-if="item.des">{{ item.des }}</span></li></ul>
</template><script>export default {name: 'context-menu',data() {// 传入watchKeyEvent= false，则不再监听按键点击const { menuList = [],watchKeyEvent = true } = this.config || {}return {menuList,watchKeyEvent,}},props: {config: Object,contextMenuShow: Boolean},mounted() {const { menuList,watchKeyEvent } = thisdocument.addEventListener('mousedown', this.triggerHide)document.addEventListener('mousewheel', this.triggerHide)if (watchKeyEvent) {document.addEventListener('keydown', ({ keyCode }) => {const res = menuList.find(item => {return item.keyCode === keyCode})if(res !== undefined && res.emitType) {this.$emit(res.emitType)}})}},destroyed() {// 组件销毁时删除监听document.removeEventListener('mousedown', this.triggerHide)document.removeEventListener('mousewheel', this.triggerHide)},methods: {triggerHide() {this.$emit('update:contextMenuShow', false)},handleClick(item) {item.emitType && this.$emit(item.emitType)}}}
</script><style lang="scss" scoped>.context-menu {position: fixed;border: 1px solid #eee;box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, .1);border-radius: 1px;background: #fff;z-index: 999;font-size: 14px;display: block;width: 200px;li {display: flex;justify-content: space-between;align-items: center;padding: 2px 10px 2px 30px;cursor: pointer;&:hover {background: #42b983;color: #fff;}}a {height: 25px;line-height: 25px;display: block;color: #1a1a1a;text-decoration: none;}span {font-size: 12px;color: gray;}}
</style>

参考链接：

https://github.com/xunleif2e/vue-context-menu

vue 右键菜单contextMenu相关推荐

【WPF】右键菜单ContextMenu可点击区域太小的问题
[WPF]右键菜单ContextMenu可点击区域太小的问题原文:[WPF]右键菜单ContextMenu可点击区域太小的问题问题描述正常使用右键菜单ContextMenu时,如果菜单项是不变的 ...
vue 右键菜单插件简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
java 树右键菜单_VUE实现Studio管理后台（八）：用右键菜单contextmenu，编辑树形结构...
RXEdior预设会有文件管理功能,但是灵活性需求不大,目前的设想是文件夹不允许修改,只允许增删改文件.基于这样的设想,把界面实现成这个效果: 这个功能并不是一个通用功能,并且我们做的代码,也没有按照 ...
动手做一个 vue 右键菜单
有一个vue的右键菜单的需求,先上网查了一下是否有插件,比如下面这个 1分钟Vue实现右键菜单 https://www.jb51.net/article/226761.htm 一顿操作之后,页面白屏, ...
WPF中的右键菜单ContextMenu
WPF中的右键菜单主要是通过ContextMenu来实现,ContextMenu的使用有两种方式一..在Resources中声明,在控件中使用. 1.在Resources中添加ContextMenu ...
jqGrid 右键菜单contextmenu简单实现
鼠标右键单击表格弹出快捷菜单可以查看.编辑.新增.删除行记录,这是很多项目的常见操作,jqGrid也可以实现类似功能,本案例依赖:bootstrap-contextmenu,该项目比较老了作者已经不维 ...
wpf 代码获取contextmenu_WPF 如何控制右键菜单ContextMenu的弹出
在具体做一些项目的时候,有时候需要需要先左键点击某个节点,然后再右键点击节点的时候才弹出右键菜单,所以直接右键点击时需要禁用掉右键菜单,这里比如我们为Grid添加了ContextMenu,但是我们需要 ...
vue 右键菜单功能
先上图接着上代码,两个文件,一个js文件,一个vue文件 1.rightContext.js import rightMenu from "./rightMenu.vue"con ...
VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索，在iframe中获取选中文字，监听鼠标事件，右键菜单
一.VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索需求实现:vue实现预览pdf文件,获取到鼠标选中的文字数据.调用pdf.js自带的搜索方法实现搜索功能(后期可以调用该接口满足其他 ...

vue 右键菜单contextMenu

vue 右键菜单contextMenu相关推荐

最新文章

热门文章