位置: IT常识 - 正文

vue中,右键菜单组件v-contextmenu的使用(vue 右键菜单)

编辑:rootadmin
vue中,右键菜单组件v-contextmenu的使用 vue中,右键菜单组件v-contextmenu的使用1、效果

推荐整理分享vue中,右键菜单组件v-contextmenu的使用(vue 右键菜单),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 右键菜单,vue右键弹出菜单,vue 鼠标右击事件,vue鼠标右键,vue右键弹出菜单,vue 右键菜单,vue右键点击菜单,vue右键点击菜单,内容如对您有帮助,希望把文章链接给更多的朋友!

右键菜单之禁用和子菜单

2、流程

第一步:安包

npm install v-contextmenu --save-devnpm install --save vue-runtime-helpers

第二步:引入

src/main.js

import contentmenu from 'v-contextmenu'import 'v-contextmenu/dist/index.css'Vue.use(contentmenu)

package.json

"dependencies": { "vue-runtime-helpers": "^1.1.2",}"devDependencies": { "v-contextmenu": "^2.9.0",}

第三步:使用

效果1-右键菜单之禁用和子菜单

index.vue

<template><div class="wrap" v-contextmenu:contextmenu> <v-contextmenu ref="contextmenu" theme="bright"> <v-contextmenu-item ><i class="fa fa-search"></i>上插入</v-contextmenu-item> <v-contextmenu-submenu title="哈哈"> <v-contextmenu-item ><i class="fa fa-search"></i>上12插入</v-contextmenu-item> </v-contextmenu-submenu> <v-contextmenu-item><i class="fa fa-search"></i>下插入</v-contextmenu-item> <v-contextmenu-item divider></v-contextmenu-item> <v-contextmenu-item><i class="fa fa-search"></i>左插入</v-contextmenu-item> <v-contextmenu-item disabled><i class="fa fa-search"></i>右插入</v-contextmenu-item> <div class="flag"> <span><i class="fa fa-star"></i></span> </div> </v-contextmenu></div></template><style>.wrap{ width: 200px; height: 200px; border: 1px solid red;}</style>

效果2-基本效果

index.vue

<template> <div class="wrap" v-contextmenu:contextmenu> <v-contextmenu ref="contextmenu"> <v-contextmenu-item>菜单1</v-contextmenu-item> <v-contextmenu-item>菜单2</v-contextmenu-item> <v-contextmenu-item>菜单3</v-contextmenu-item> </v-contextmenu> </div></template><style>.wrap{ width: 200px; height: 200px; border: 1px solid red;}</style>3、使用说明api

npm地址——https://www.npmjs.com/package/v-contextmenu

另一个参考组件地址——https://www.npmjs.com/package/v-contextmenu-directive

3.1、指令v-contextmenu:ref

其中 ref 为一个 VContextmenu 的实例,例如

<v-contextmenu ref="contextmenu"> <v-contextmenu-item>菜单</v-contextmenu-item></v-contextmenu><div v-contextmenu:contextmenu></div>3.2、组件VContextmenu-根元素

根组件

Attributes属性

参数说明类型可选值默认值eventType触发其显示的事件类型String事件名contextmenutheme主题Stringdefault / brightdefault

v-contextmenu: 根元素

vue中,右键菜单组件v-contextmenu的使用(vue 右键菜单)

default: 根元素-默认主题(蓝背景)

​ bright: 根元素-亮色主题(红背景)

另外可自行根据 classnames 进行样式覆盖

<v-contextmenu ref="contextmenu" theme="bright">

Methods方法

方法名称说明参数show显示菜单{ top: number, left: number },top 和 left 均为菜单相对浏览器窗口的值hide隐藏菜单–

Events

事件名称说明回调参数show菜单显示时触发的事件菜单组件的 vmhide菜单隐藏时触发的事件菜单组件的 vmVContextmenuItem-单个菜单

单个菜单,只能在 VContextmenu, VContextmenuSubmenu 和 VContextmenuGroup 下使用

Attributes

参数说明类型可选值默认值divider是否为分隔符Booleantrue / falsefalsedisabled是否禁用Booleantrue / falsefalseautoHide被点击后菜单是否自动隐藏Booleantrue / falsetrue

v-contextmenu-item: 单个菜单

hover: 单个菜单激活状态

disabled: 单个菜单禁用状态

divider: 分割线

<v-contextmenu-item divider></v-contextmenu-item><v-contextmenu-item :auto-hide="false">不自动关闭1</v-contextmenu-item>

Events

事件名称说明回调参数click菜单被点击时触发的事件第一个参数是 vm, 第二个参数是该菜单的 eventmouseenter鼠标移动到菜单上时触发的事件第一个参数是 vm, 第二个参数是该菜单的 eventmouseleave鼠标从菜单上离开时触发的事件第一个参数是 vm, 第二个参数是该菜单的 eventVContextmenuSubmenu-子菜单容器

子菜单,可嵌套使用

Attributes属性

参数说明类型可选值默认值title菜单名String––disabled是否禁用Booleantrue / falsefalse v-contextmenu-submenu: 子菜单容器

​ title: 子菜单标题

​ icon: 子菜单标题 icon

Events事件

事件名称说明回调参数mouseenter鼠标移动到菜单上时触发的事件第一个参数是 vm, 第二个参数是该菜单的 eventmouseleave鼠标从菜单上离开时触发的事件第一个参数是 vm, 第二个参数是该菜单的 event

Slots

Slot 名说明title菜单名,和 title 属性二选一VContextmenuGroup-按钮组根元素

菜组单,嵌套 VContextmenuItem 使用

Attributes属性

参数说明类型可选值默认值maxWidth最大宽度Number / String

`-按钮组根元素

菜组单,嵌套 VContextmenuItem 使用

Attributes属性

参数说明类型可选值默认值maxWidth最大宽度Number / Stringv-contextmenu-group__menus: 按钮组按钮容器
本文链接地址:https://www.jiuchutong.com/zhishi/287140.html 转载请保留说明!

上一篇:RuoYi-Vue——图标使用(vue调整图标大小)

下一篇:抖音小程序实践三:接口开发指南(抖音小程序任务哪里接)

  • 一般纳税人增值税申报操作流程
  • 个人所得税信息采集怎么弄
  • 法人能去税务局买票吗
  • 分公司承担总公司差旅
  • 实收资本能直接转出来吗
  • 加盟费是怎么回事
  • 空调压缩机属于什么系统
  • 房地产开发企业预缴增值税
  • 不动产进项税额分两年抵扣
  • 油费预付卡如何开发票
  • 员工报销增值税
  • 主营业务收入如何红冲
  • 免税企业收到增值税专用发票咋办
  • 产品置换广告费
  • 费用收入结转本年利润
  • 外国专家工资个税
  • 停车场吗
  • 增值税发票是需要先对公转账吗
  • 公司有出账没有进账怎么办
  • 小企业报表为什么勾选不到小型微利企业
  • 本月收到外汇怎么做账
  • 进项税抵扣需要做分录吗
  • 政府奖励金额是否要交二次税呢
  • 一般进口货物的完税价格
  • 员工两处取得工资收入
  • 个人业务费是什么
  • 怎么把公司账户的钱转到个人账号
  • 公司一直是亏损怎么赔偿
  • excel多表操作法
  • 存货包括哪些会计账户
  • 嘴型融合 wav2lip 升级版
  • 如何做好零售商
  • 延期收款利息如何缴税
  • php开发模板
  • 资产减值损失一经计提不得转回
  • 土地增值税成本费用
  • 管理成本分摊比例是多少
  • 上一年度的费用退回清算表怎么填
  • mongodb $nin
  • mssql使用教程
  • 成本会计制造费用核算的内容
  • 企业申请进出口权经营范围
  • 个税的缴纳期数是什么
  • 减免的附加税要申报吗
  • 资产减值损失如何计算
  • 收到货款未开发票是否违法
  • 交易性金融资产公允价值变动怎么算
  • 一年的系统服务费多少钱
  • 税后扣款怎么做账
  • 包含个人社保的保险
  • 累计预扣法的优缺点
  • 在建工程转长期待摊费用是什么意思
  • 发票已经认证是什么意思
  • 如何设置生产成本总账表格
  • MySQL中的max()函数使用教程
  • mysql 5.7.34安装
  • 从mysql导出数据
  • 通过备份记录获取文件
  • mysql数据库的介绍
  • win7自带防护软件
  • win8怎么设置
  • windowsserver2008r2激活密钥
  • centos 命令大全
  • 管理需要
  • helpcfg是什么文件
  • linux 限制内存
  • windows8.1安装windows7
  • WIN10更新失败
  • mysql如何建立数据完整性约束
  • linux命令行技巧
  • nodejs增删改查
  • python中列表的遍历
  • Android 判断是否打开了微信
  • 编写高性能代码时以下哪种技术可用于减少内存访问延迟
  • unity2020怎么导入资源
  • div跟随滚动条移动
  • 税务局全年绩效分析报告
  • 设立新的机构或开办新的业务
  • 特斯拉购车补贴2023苏州
  • 企业税收筹划的基本目标
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设