386 lines
14 KiB
Markdown
386 lines
14 KiB
Markdown
|
# vue3-menus
|
|||
|
|
|
|||
|
|
Vue3.0 自定义右键菜单，支持 Vite2.0，[官网](https://doc.wssio.com/opensource/vue3-menus/)
|
|||
|
|
|
|||
|
|
Vue3.0 原生实现完全自定义右键菜单组件, 零依赖，可根据可视区域自动调节显示位置，可支持插槽完全重写每一项菜单
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 在线演示
|
|||
|
|
|
|||
|
|
- [完整菜单功能演示](https://codepen.io/xfy520/pen/yLXNqzy)
|
|||
|
|
- [复制粘贴演示](https://codepen.io/xfy520/pen/xxrGJdg)
|
|||
|
|
|
|||
|
|
## 快速安装
|
|||
|
|
|
|||
|
|
### npm 安装
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
npm install vue3-menus
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
或
|
|||
|
|
|
|||
|
|
```shell
|
|||
|
|
yarn add vue3-menus
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### CDN
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<script src="https://unpkg.com/vue3-menus/dist/vue3-menus.umd.min.js">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用（Vite 情况下同样使用）
|
|||
|
|
|
|||
|
|
CDN引入则不需要 `app.use(Vue3Menus)`
|
|||
|
|
> 样例中使用的是`@ant-design/icons-vue`图标与`@element-plus/icons`图标、图标可以使用`html`代码传入、也可以通过插槽`自定义图标`、也可以`完全重写每一项菜单`
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// 全局注册组件、指令、方法
|
|||
|
|
import { createApp } from 'vue';
|
|||
|
|
import Menus from 'vue3-menus';
|
|||
|
|
import App from './App.vue';
|
|||
|
|
const app = createApp(App);
|
|||
|
|
app.use(Menus);
|
|||
|
|
app.mount('#app');
|
|||
|
|
// 单个注册某个，以下三种方式均可在单个文件内使用
|
|||
|
|
import { createApp } from 'vue';
|
|||
|
|
import { directive, menusEvent, Vue3Menus } from 'vue3-menus';
|
|||
|
|
import App from './App.vue';
|
|||
|
|
const app = createApp(App);
|
|||
|
|
app.component('vue3-menus', Vue3Menus); // 只注册组件
|
|||
|
|
app.directive('menus', directive); // 只注册指令
|
|||
|
|
app.config.globalProperties.$menusEvent = menusEvent; // 只绑定方法
|
|||
|
|
app.mount('#app');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<template>
|
|||
|
|
<div style="height: 98vh; width: 100%;" v-menus:left="menus">
|
|||
|
|
<div class="div" v-menus:left="menus">指令方式打开菜单</div>
|
|||
|
|
<div class="div" @click.stop @contextmenu="($event) => $menusEvent($event, menus)">事件方式打开菜单</div>
|
|||
|
|
<div class="div" @click.stop @contextmenu="rightClick">组件方式打开菜单</div>
|
|||
|
|
<vue3-menus :open="isOpen" :event="eventVal" :menus="menus.menus">
|
|||
|
|
<template #icon="{menu, activeIndex, index}">{{activeIndex}}</template>
|
|||
|
|
<template #label="{ menu, activeIndex, index }">插槽：{{ menu.label }}</template>
|
|||
|
|
</vue3-menus>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { defineComponent, nextTick, ref, shallowRef } from "vue";
|
|||
|
|
import { SyncOutlined, WindowsOutlined, QrcodeOutlined } from '@ant-design/icons-vue';
|
|||
|
|
import { Printer } from '@element-plus/icons'
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: "App",
|
|||
|
|
setup() {
|
|||
|
|
const isOpen = ref(false);
|
|||
|
|
const eventVal = ref({});
|
|||
|
|
function rightClick(event) {
|
|||
|
|
isOpen.value = false;
|
|||
|
|
nextTick(() => {
|
|||
|
|
eventVal.value = event;
|
|||
|
|
isOpen.value = true;
|
|||
|
|
})
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
const menus = shallowRef({
|
|||
|
|
menus: [
|
|||
|
|
{
|
|||
|
|
label: "返回(B)",
|
|||
|
|
tip: 'Alt+向左箭头',
|
|||
|
|
click: () => {
|
|||
|
|
window.history.back(-1);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "点击不关闭菜单",
|
|||
|
|
tip: '不关闭菜单',
|
|||
|
|
click: () => {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "前进(F)",
|
|||
|
|
tip: 'Alt+向右箭头',
|
|||
|
|
disabled: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "重新加载(R)",
|
|||
|
|
tip: 'Ctrl+R',
|
|||
|
|
click: () => location.reload(),
|
|||
|
|
divided: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "另存为(A)...",
|
|||
|
|
tip: 'Ctrl+S'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "打印(P)...",
|
|||
|
|
tip: 'Ctrl+P',
|
|||
|
|
click: () => window.print(),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "投射(C)...",
|
|||
|
|
divided: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '发送到你的设备',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: 'iPhone',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'iPad'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Windows 11'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "为此页面创建二维码",
|
|||
|
|
divided: true,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "使用网页翻译(F)",
|
|||
|
|
divided: true,
|
|||
|
|
children: [
|
|||
|
|
{ label: "翻译成繁体中文" },
|
|||
|
|
{ label: "翻译成繁体中文" },
|
|||
|
|
{
|
|||
|
|
label: "百度翻译", children: [
|
|||
|
|
{ label: "翻译成繁体中文" },
|
|||
|
|
{ label: "翻译成繁体中文" },]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "搜狗翻译", children: [
|
|||
|
|
{ label: "翻译成繁体中文" },
|
|||
|
|
{ label: "翻译成繁体中文" },
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "有道翻译", children: [
|
|||
|
|
{ label: "翻译成繁体中文" },
|
|||
|
|
{ label: "翻译成繁体中文" },
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "截取网页(R)"
|
|||
|
|
},
|
|||
|
|
{ label: "查看网页源代码(U)", tip: 'Ctrl+U' },
|
|||
|
|
{ label: "检查(N)", tip: 'Ctrl+Shift+I' }
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
return { menus, isOpen, rightClick, eventVal }
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.div {
|
|||
|
|
display: inline-block;
|
|||
|
|
background-color: aqua;
|
|||
|
|
margin: 0 20px;
|
|||
|
|
line-height: 200px;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
height: 200px;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 指令方式使用
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<template>
|
|||
|
|
<div v-menus:left="menus">指令方式打开菜单</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { defineComponent, shallowRef } from "vue";
|
|||
|
|
import { directive } from 'vue3-menus';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: "App",
|
|||
|
|
directives: {
|
|||
|
|
menus: directive
|
|||
|
|
},
|
|||
|
|
setup() {
|
|||
|
|
const menus = shallowRef({
|
|||
|
|
menus: [
|
|||
|
|
{
|
|||
|
|
label: "返回(B)",
|
|||
|
|
tip: 'Alt+向左箭头',
|
|||
|
|
click: () => {
|
|||
|
|
window.history.back(-1);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "点击不关闭菜单",
|
|||
|
|
tip: '不关闭菜单',
|
|||
|
|
click: () => {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
return { menus }
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 方法方式使用
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<template>
|
|||
|
|
<div class="div" @click.stop @contextmenu="rightClick">事件方式打开菜单</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { defineComponent, shallowRef } from "vue";
|
|||
|
|
import { menusEvent } from 'vue3-menus';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: "App",
|
|||
|
|
setup() {
|
|||
|
|
const menus = shallowRef({
|
|||
|
|
menus: [
|
|||
|
|
{
|
|||
|
|
label: "返回(B)",
|
|||
|
|
tip: 'Alt+向左箭头',
|
|||
|
|
click: () => {
|
|||
|
|
window.history.back(-1);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "点击不关闭菜单",
|
|||
|
|
tip: '不关闭菜单',
|
|||
|
|
click: () => {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
function rightClick(event) {
|
|||
|
|
menusEvent(event, menus.value);
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
return { rightClick }
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 组件方式使用
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<template>
|
|||
|
|
<div class="div" @click.stop @contextmenu="rightClick">组件方式打开菜单</div>
|
|||
|
|
<vue3-menus v-model:open="isOpen" :event="eventVal" :menus="menus" hasIcon>
|
|||
|
|
<template #icon="{menu, activeIndex, index}">{{activeIndex}}</template>
|
|||
|
|
<template #label="{ menu, activeIndex, index}">插槽：{{ menu.label }}</template>
|
|||
|
|
</vue3-menus>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import { defineComponent, nextTick, ref, shallowRef } from "vue";
|
|||
|
|
import { Vue3Menus } from 'vue3-menus';
|
|||
|
|
|
|||
|
|
export default defineComponent({
|
|||
|
|
name: "App",
|
|||
|
|
components: {
|
|||
|
|
Vue3Menus
|
|||
|
|
},
|
|||
|
|
setup() {
|
|||
|
|
const isOpen = ref(false);
|
|||
|
|
const eventVal = ref({});
|
|||
|
|
function rightClick(event) {
|
|||
|
|
isOpen.value = false;
|
|||
|
|
nextTick(() => {
|
|||
|
|
eventVal.value = event;
|
|||
|
|
isOpen.value = true;
|
|||
|
|
})
|
|||
|
|
event.preventDefault();
|
|||
|
|
}
|
|||
|
|
const menus = shallowRef([
|
|||
|
|
{
|
|||
|
|
label: "返回(B)",
|
|||
|
|
tip: 'Alt+向左箭头',
|
|||
|
|
click: () => {
|
|||
|
|
window.history.back(-1);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "点击不关闭菜单",
|
|||
|
|
tip: '不关闭菜单',
|
|||
|
|
click: () => {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]);
|
|||
|
|
return { menus, isOpen, rightClick, eventVal }
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 参数说明
|
|||
|
|
|
|||
|
|
### 单个菜单项参数`MenusItemOptions`
|
|||
|
|
|
|||
|
|
| 属性 | 描述 | 类型 | 是否必填 | 默认值 |
|
|||
|
|
| :------: | :----------------------------------------------------------: | :--------------------: | :------: | :---------: |
|
|||
|
|
| label | 菜单项名称 | `string` | `true` | — |
|
|||
|
|
| style | 每一项菜单的自定义样式 | `object` | `false` | `{}` |
|
|||
|
|
| icon | 图标参数，内部支持html字符串图标，传入组件时需要实现icon插槽 | `string` \| `其他类型` | `false` | `undefined` |
|
|||
|
|
| disabled | 是否禁用菜单项 | `boolean` | `false` | `undefined` |
|
|||
|
|
| divided | 是否显示分割线 | `boolean` | `false` | `undefined` |
|
|||
|
|
| tip | 没项菜单后面的小提示 | `string` | `false` | `''` |
|
|||
|
|
| hidden | 是否隐藏该项 | `boolean` | `false` | `undefined` |
|
|||
|
|
| children | 子菜单列表信息 | `MenusItemOptions[]` | `false` | `undefined` |
|
|||
|
|
| enter | 菜单项移入事件，返回`null`或`false`不展开子菜单 | `Function()` | `false` | `undefined` |
|
|||
|
|
| click | 菜单项点击事件，返回`null`或`false`不关闭菜单 | `Function()` | `false` | `undefined` |
|
|||
|
|
|
|||
|
|
### 指令与方法使用参数
|
|||
|
|
|
|||
|
|
| 属性 | 描述 | 类型 | 是否必填 | 默认值 |
|
|||
|
|
| :-------: | :---------------------------------------------: | :-------------------: | :------: | :---------: |
|
|||
|
|
| menus | 菜单列表信息 | `MenusItemOptions[]` | `true` | [] |
|
|||
|
|
| menusClass | 菜单外层 `div` 的 `class` 名 | `string` | `false` | `null` |
|
|||
|
|
| itemClass | 菜单每一项的`class`名 | `string` | `false` | `null` |
|
|||
|
|
| minWidth | 菜单容器最小宽度 | `number` \| `string` | `false` | `none` |
|
|||
|
|
| maxWidth | 菜单容器最打宽度 | `number` \| `string` | `false` | `none` |
|
|||
|
|
| zIndex | 菜单层级 | `number` \| `string` | `false` | `3` |
|
|||
|
|
| direction | 菜单打开方向 | `left` \| `right` | `false` | `right` |
|
|||
|
|
|
|||
|
|
### 组件使用参数
|
|||
|
|
|
|||
|
|
| 属性 | 描述 | 类型 | 是否必填 | 默认值 | 插槽传入值 |
|
|||
|
|
| :-------: | :---------------------------------------------: | :-------------------: | :------------------: | :---------: | :-----------------------------------------------: |
|
|||
|
|
| menus | 菜单列表信息 | `MenusItemOptions[]` | `true` | [] | |
|
|||
|
|
| event | 鼠标事件信息(指令使用时不传) | `Event` | 与`position`必填一项 | {} | |
|
|||
|
|
| menusClass | 菜单外层 `div` 的 `class` 名 | `string` | `false` | `null` | |
|
|||
|
|
| itemClass | 菜单每一项的`class`名 | `string` | `false` | `null` | |
|
|||
|
|
| minWidth | 菜单容器最小宽度 | `number` \| `string` | `false` | `none` | |
|
|||
|
|
| maxWidth | 菜单容器最打宽度 | `number` \| `string` | `false` | `none` | |
|
|||
|
|
| zIndex | 菜单层级 | `number` \| `string` | `false` | `3` | |
|
|||
|
|
| direction | 菜单打开方向 | `left` \| `right` | `false` | `right` | |
|
|||
|
|
| open | 控制菜单组件显示 | `boolean` | `true` | `false` | |
|
|||
|
|
| args | 附加参数 | `unknown` | `false` | `undefined` | |
|
|||
|
|
| default | 默认插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中索引, `menu`: 当前菜单项 `MenusItemOptions`, `index`: 当前菜单索引 |
|
|||
|
|
| icon | 图标插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中索引, `menu`: 当前菜单项 `MenusItemOptions`, `index`: 当前菜单索引 |
|
|||
|
|
| label | 菜单标题插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中索引, `menu`: 当前菜单项 `MenusItemOptions`, `index`: 当前菜单索引 |
|
|||
|
|
| suffix | 菜单后缀插槽 | `Slot` | `false` | - | `activeIndex`: 当前选中索引, `menu`: 当前菜单项 `MenusItemOptions`, `index`: 当前菜单索引 |
|
|||
|
|
|
|||
|
|
### 指令使用配置
|
|||
|
|
|
|||
|
|
> 配置参数与方法使用相同
|
|||
|
|
|
|||
|
|
| 指令使用方式 | 描述 | 参数类型 | 参数是否必填 | 默认值 |
|
|||
|
|
| :-----------: | :------------------------: | :-----------: | :----------: | :----: |
|
|||
|
|
| v-menus | 绑定元素右击打开菜单 | `MenuOptions` | `true` | - |
|
|||
|
|
| v-menus:all | 绑定元素左右击均可打开菜单 | `MenuOptions` | `true` | - |
|
|||
|
|
| v-menus:left | 绑定元素左击打开 | `MenuOptions` | `true` | - |
|
|||
|
|
| v-menus:right | 绑定元素右击打开 | `MenuOptions` | `true` | - |
|