v-contextmenu
February 13, 2024 · View on GitHub
目录
类型
type TriggerEventType = 'contextmenu' | 'click' | 'dblclick';
指令
v-contextmenu:ref
其中 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[] | 可选 | - | 触发的事件类型 |
组件
VContextmenu
根组件
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 |
VContextmenuItem
单个菜单，只能在 VContextmenu, VContextmenuSubmenu 和 VContextmenuGroup 下使用
Attributes
| 参数 | 类型 | 可选 | 默认值 | 说明 |
|---|---|---|---|---|
| disabled | boolean | 可选 | false | 是否禁用 |
| hideOnClick | boolean | 可选 | true | 被点击后菜单是否自动隐藏 |
| contextmenuAsClick | boolean | 可选 | true | 是否将 contextmenu 事件等同于点击 |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| click | 菜单被点击时触发的事件 | 事件 event |
| contextmenu | 菜单的 contextmenu 事件 | 事件 event |
| mouseenter | 鼠标移动到菜单上时触发的事件 | 事件 event |
| mouseleave | 鼠标从菜单上离开时触发的事件 | 事件 event |
VContextmenuDivider
分割线
VContextmenuSubmenu
子菜单，可嵌套使用
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 菜单名 | String | -- | -- |
| disabled | 是否禁用 | Boolean | true / false | false |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| mouseenter | 鼠标移动到菜单上时触发的事件 | 事件 event |
| mouseleave | 鼠标从菜单上离开时触发的事件 | 事件 event |
Slots
| Slot 名 | 说明 |
|---|---|
| title | 菜单名，和 title 属性二选一 |
VContextmenuGroup
菜组单，嵌套 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