一、安装

npm install @xunlei/vue-context-menu

二、修改main.js

import VueContextMenu from '@xunlei/vue-context-menu'

Vue.use(VueContextMenu)

三、使用

 <context-menu class="right-menu"
:target="contextMenuTarget"
:show="contextMenuVisible"
@update:show="(show) => contextMenuVisible = show">
<a href="javascript:;" @click="new">新建</a>
<a href="javascript:;" @click="del">删除</a>
</context-menu>
export default {
name: 'basetable',
data() {
return {
contextMenuTarget: document.body, //绑定的dom
contextMenuVisible: false,
}
}
}
methods: {
new(){
this.contextMenuVisible=false
},
del(){
this.contextMenuVisible=false
}
}

四、效果

Vuejs右键弹出菜单的更多相关文章

  1. vc++ 如何添加右键弹出菜单

    一.创建新工程 二.编辑菜单资源 1.添加菜单 按"Ctrl+R",双击"Menu"图标 2.于菜单编辑器内编辑菜单 四.添加代码(红色部分) void CCM ...

  2. win32进阶之路:程序托盘图标+右键弹出菜单

     开场白 本次介绍两个非常棒且实用的技巧:程序托盘图标和右键弹出菜单,效果如下图. 程序托盘图标用了迅雷的图标,右键点击时候会弹出三个选项的菜单. 程序托盘图标设置 我会用尽可能清晰明了的步骤介绍方式 ...

  3. DirectUI界面编程(六)实现右键弹出菜单

    本节向大家介绍一下右键弹出菜单是如何实现的.效果如下,在窗口中点击鼠标右键弹出菜单,点击菜单项能够响应菜单点击事件. 使用Duilib库实现的弹出菜单,实际上也是一个Windows窗口,因此我们需要创 ...

  4. Vue2的右键弹出菜单(vue-contextmenu)

    给大家推荐一个基于Vue2的右键弹出菜单插件,支持单一SPA页面以及可以在循环绑定中使用. 项目地址为:https://github.com/chIIC/vue-...demo1: 父组件绑定右键事件 ...

  5. 关于MFC主菜单和右键弹出菜单

    一.主菜单.弹出菜单和右键菜单的概念: 主菜单是窗口顶部的菜单,一个窗口或对话框只能有一个主菜单,但是主菜单可以被更改(SetMenu()更改): 创建方式:CMenu::CreateMenu(voi ...

  6. SWT中的Tree中 添加右键弹出菜单

    先看一下效果: 如图:在树上单击鼠标右键会弹出 弹出式菜单.做法其实很简单,先做一个树: final TreeViewer treeViewer = new TreeViewer(group, SWT ...

  7. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. QT 右键弹出菜单

    QWidget及其子类都可有右键菜单 1.设置标志 在widget初始化的时候 setContextMenuPolicy(Qt::CustomContextMenu); 设置为自定义菜单模式 2.在需 ...

  9. Win32建立右键弹出菜单(PopMenu)

    自定义右键菜单: #ifndef _CONTEXTMENU_H_ #define _CONTEXTMENU_H_ #include <windows.h> //动态菜单 #define I ...

  10. Qt编程之对QGraphicsItem点击右键弹出菜单

    就是对这个contextMenuEvent 事件重新实现,在这个事件函数中创建菜单,大概就是这样. void MyItem::contextMenuEvent(QGraphicsSceneContex ...

随机推荐

  1. CH32V208蓝牙从机sleep模式下功耗测试

    本测试基于CH32V208W的开发板:蓝牙从机模式:使用程序BLE_UART 在进行功耗测试的时候尽量去除额外耗电器件,将开发板上的VDD于VIO相连接,测功耗时直接给VDD供电. 将会对500ms, ...

  2. Hive中Lateral view用法

    1. lateral view 简介   hive函数 lateral view 主要功能是将原本汇总在一条(行)的数据拆分成多条(行)成虚拟表,再与原表进行笛卡尔积,从而得到明细表.配合UDTF函数 ...

  3. 初次尝试GPU Driver —— 大范围植被渲染之着色

    初次尝试GPU Driver -- 大范围植被渲染之着色 在<初次尝试GPU Driven -- 大范围植被渲染>中实现了草地分布,本文实现草的着色. 本文分四个部分: 生成网格 随机调整 ...

  4. IDEA 2024.1:Spring支持增强、GitHub Action支持增强、更新HTTP Client等

    有段时间没有更新IDEA了,早上看到 IntelliJ IDEA 2024.1 EAP 5发布的邮件提示,瞄了一眼,发现真的是越来越强了,其中不少功能对我来说还是非常有用的.也许这些能力对关注DD的小 ...

  5. dotnet-cnblog tool 测试案例

    这是测试donet-cnblog工具是否能将正常的Typora图片转换为博客园格式 测试1:本地图片导入 测试2:QQ截图 测试3:url https://pics3.baidu.com/feed/9 ...

  6. Unix\Linux 执行 shell 报错:“$'\r': 未找到命令” 的解决办法

    原因 原因是因为 shell 脚本是在 Windows 编写导致的换行问题,具体原因是 Windows 的换行符号为 CRLF(\r\n),而 Unix\Linux 为 LF(\n),Macintos ...

  7. golang数组&切片&map

    数组 数组声明 func main() { /* 语法一 */ // 数组名字 [数组长度] 数组类型 // 声明一个数组 长度为3 类型是int 会初始化为int类型的零值,默认值是[0 0 0 ] ...

  8. oracle中约束(constraints)是如何影响查询计划的

    原文: http://www.oracle.com/technetwork/issue-archive/2009/09-may/o39asktom-096149.html oracle中约束(cons ...

  9. 链表--insert

    分别是使用了二级指针和一级指针的两种方法,最后会按插入的顺序依次打印1,2,3,4 主要区别在于,使用二级指针,可以在main函数里直接用一个空的Node指针,而一级指针是在main函数里面先添加了一 ...

  10. win32 - 对于32位的应用程序,LoadResource为什么不需要释放资源

    原话: [此功能已过时,仅支持与16位Windows向后兼容.对于32位Windows应用程序,不必释放使用LoadResource加载的资源.如果在32或64位Windows系统上使用,此函数将返回 ...