type TriggerEventType = 'contextmenu' | 'click' | 'dblclick';
其中 ref
指向一个 VContextmenu
的实例,例如
<v-contextmenu ref="contextmenu">
<v-contextmenu-item>菜单</v-contextmenu-item>
</v-contextmenu>
<div v-contextmenu:contextmenu></div>
指令也支持传入参数,用法如下:
<div v-contextmenu:contextmenu="{ trigger: ['contextmenu', 'click'] }"></div>
参数 | 类型 | 可选 | 默认值 | 说明 |
---|---|---|---|---|
trigger | TriggerEventType | TriggerEventType[] |
可选 | - | 触发的事件类型 |
根组件
Attributes
参数 | 类型 | 可选 | 默认值 | 说明 |
---|---|---|---|---|
model-value / v-model | boolean |
可选 | false |
是否显示 |
autoAdjustPlacement | boolean |
可选 | true |
是否自动切换方位,即当菜单显示时溢出浏览器窗口可视区域,自动切换显示方位 |
disabled | boolean |
可选 | false |
是否禁用菜单(菜单不会出现) |
teleport | string | Element |
可选 | "body" |
使用 Teleport |
preventContextmenu | boolean |
可选 | true |
是否阻止菜单内 contextmenu 事件的默认行为 |
Methods
方法名称 | 说明 | 参数 |
---|---|---|
show | 显示菜单 | { top: number, left: number } ,top 和 left 均为菜单相对浏览器窗口的值 |
hide | 隐藏菜单 | -- |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
show | 菜单显示时触发的事件 | -- |
hide | 菜单隐藏时触发的事件 | -- |
contextmenu | 菜单内的 contextmenu 事件 | 事件 event |
单个菜单,只能在 VContextmenu
, VContextmenuSubmenu
和 VContextmenuGroup
下使用
Attributes
参数 | 类型 | 可选 | 默认值 | 说明 |
---|---|---|---|---|
disabled | boolean |
可选 | false |
是否禁用 |
hideOnClick | boolean |
可选 | true |
被点击后菜单是否自动隐藏 |
contextmenuAsClick | boolean |
可选 | true |
是否将 contextmenu 事件等同于点击 |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
click | 菜单被点击时触发的事件 | 事件 event |
contextmenu | 菜单的 contextmenu 事件 | 事件 event |
mouseenter | 鼠标移动到菜单上时触发的事件 | 事件 event |
mouseleave | 鼠标从菜单上离开时触发的事件 | 事件 event |
分割线
子菜单,可嵌套使用
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 菜单名 | String | -- | -- |
disabled | 是否禁用 | Boolean | true / false | false |
Events
事件名称 | 说明 | 回调参数 |
---|---|---|
mouseenter | 鼠标移动到菜单上时触发的事件 | 事件 event |
mouseleave | 鼠标从菜单上离开时触发的事件 | 事件 event |
Slots
Slot 名 | 说明 |
---|---|
title | 菜单名,和 title 属性二选一 |
菜组单,嵌套 VContextmenuItem
使用
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 标题名 | String | -- | -- |
maxWidth | 最大宽度 | Number / String | -- | -- |
Slots
Slot 名 | 说明 |
---|---|
title | 标题名 |
提供三种主题
默认
亮色
暗色
另外可自行根据 classnames
进行样式覆盖
v-contextmenu
:根元素v-contextmenu-icon
:iconv-contextmenu-inner
:菜单根元素v-contextmenu-divider
:分割线v-contextmenu-item
:单个菜单v-contextmenu-item--hover
:单个菜单激活状态v-contextmenu-item--disabled
:单个菜单禁用状态v-contextmenu-group
:按钮组根元素v-contextmenu-group__title
:按钮组标题v-contextmenu-group__menus
:按钮组按钮容器v-contextmenu-submenu
:子菜单容器v-contextmenu-submenu__title
:子菜单标题v-contextmenu-submenu__menus
:子菜单v-contextmenu-submenu__menus--top
:子菜单 Topv-contextmenu-submenu__menus--right
:子菜单 Rightv-contextmenu-submenu__menus--bottom
:子菜 Bottom单v-contextmenu-submenu__menus--left
:子菜单 Leftv-contextmenu-submenu__arrow
:子菜单标题 icon