位置: 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调整图标大小)

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

  • 山东省增值税发票勾选认证平台
  • 住宿费可以抵扣进项吗
  • 税后营业利润和利润总额的区别
  • 其他应收款和其他应付款可以通用吗
  • 食堂买菜费用如何做会计
  • 下列不属于流动资产的
  • 医疗单位门诊收费票据是发票吗
  • 工程项目估算收入要缴税吗
  • 超市购物卡购物刷卡显帐号吗
  • 几个月以前发现便血是肠癌吗
  • 废旧物资回收经营范围
  • 自产自用的资源税记入
  • 出口货物退回需交税吗
  • 购入货物自用的进项税额转出分录怎么处理
  • 个人取得投资收益是否缴纳个税
  • 本年度应收账款是否应该加起初
  • 现金交易的发票可以认证
  • 案例分析两个分公司转资金怎么做账?
  • 税收折旧率
  • 河道工程维护管理费征收
  • 资产负债表如何调平
  • 汇票贴息会计分录
  • 未抵扣进项税额可以退税吗
  • 视同销售的计税依据
  • 小规模增值税免税额
  • 其他应收款注销时处理
  • mac怎么把文件发给别人
  • 预收账款与应收账款为什么合并
  • 银行哪些进项税不用抵扣
  • 营业款怎么存入公司账户
  • 出口退税转内销的话如何算发票金额
  • 任意公积金可以不提取吗
  • php延迟静态绑定
  • php图片加水印实例分析
  • “普罗旺斯”
  • php有哪些
  • Yii2针对游客、用户防范规则和限制的解决方法分析
  • 开多少票就要进多少钱吗
  • 企业做账会计分录流程
  • python中列表的索引用法
  • python如何获取列表元素
  • 什么公司可以核定企业所得税
  • 营利性与非营利性的关系
  • 购买固定资产的运费计入什么科目
  • 银行共管账户怎么提款
  • 固定资产增值税发票如何入账
  • 收到加盟费怎么开票入账
  • 税前扣除的职工福利费怎么算
  • 税控服务费怎么记账
  • 加油账务处理
  • 高新企业 要求
  • 营业外收入属于借方还是贷方
  • 总账的建账过程
  • SQLserver中cube:多维数据集实例详解
  • mysql安装配置教程5.7.25
  • innodb_flush_method取值方法(实例讲解)
  • task host windows解决
  • 重装win8系统后没有声音
  • u启动开机启动快捷键
  • win10连无线网络受限
  • windows8 8.1
  • win10周年版
  • windows打开
  • cocos 2d x
  • node.js go
  • 批处理文件的编写
  • 冒充咋写
  • nodejs命令行参数解析
  • jQuery中ajax错误调试分析
  • python制作爬虫教程
  • javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
  • 稳岗补贴是否需要发放
  • 山东省梁山县属于什么市?
  • 济南市市中区二手房
  • 个人所得税年申报与月申报区别
  • 土地面积测量
  • 税务申报网上申报
  • 湖南省地方税务局综合楼项目设计
  • 西安市个税证明去哪里打印
  • 城市维护建设税的计税依据
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设