Vue3.0实现原生高度可自定义菜单组件vue3-menus Vue3.0实现原生高度可自定义菜

vue3-menus Vue3.0 自定义右键菜单
【Vue3.0实现原生高度可自定义菜单组件vue3-menus】Vue3.0 原生实现完全自定义右键菜单组件, 零依赖，可根据可视区域自动调节显示位置，可支持插槽完全重写每一项菜单

文章图片

在线演示

完整菜单功能演示
复制粘贴演示

快速安装 npm 安装

npm install vue3-menus

或

yarn add vue3-menus

CDN

.div { display: inline-block; background-color: aqua; margin: 0 20px; line-height: 200px; padding: 0 20px; height: 200px; }

指令方式使用

方法方式使用

组件方式使用

Vite下使用使用方式1

import { createApp } from 'vue'; import App from './App.vue'; import Vue3Menus from 'https://esm.sh/vue3-menus@1.0.3'; // 也可以将1.0.3换成其他版本号 const app = createApp(App); app.mount('#app');

使用方式2

在vite配置文件vite.config中进行别名替换

import { createApp } from 'vue'; import App from './App.vue'; import Vue3Menus from 'vue3-menus'; const app = createApp(App); app.mount('#app');

export default { resolve: { alias: { // 其他配置 'vue3-menus': 'https://esm.sh/vue3-menus@1.0.3'// 也可以将1.0.3换成其他版本号 } } }

参数说明单个菜单项参数MenusItemOptions

属性	描述	类型	是否必填	默认值
label	菜单项名称	`string`	`true`	—
style	每一项菜单的自定义样式	`object`	`false`	`{}`
icon	`string`: 传入图标html代码、`object`: 传入组件或者`{node: 组件, option: 组件配置参数}`	`string` \	`object`	`false`	`undefined`
disabled	是否禁用菜单项	`boolean`	`false`	`undefined`
divided	是否显示分割线	`boolean`	`false`	`undefined`
tip	没项菜单后面的小提示	`string`	`false`	`''`
click	菜单项点击事件，返回`null`或`false`不关闭菜单	`Function()`	`false`	`undefined`
children	子菜单列表信息	`MenusItemOptions[]`	`false`	`undefined`

公共参数MenuOptions

属性	描述	类型	是否必填	默认值
menus	菜单列表信息	`MenusItemOptions[]`	`true`	[]
menusStyle	菜单容器的样式	`object`	`false`	{}
menusItemClass	菜单每一项的`class`名	`string`	`false`	`null`
event	鼠标事件信息(指令使用时可以不传)	`Event`	与`position`必填一项	{}
position	手动传入菜单显示位置(指令使用时可以不传)	`{x: number, y: number}`	与`event`必填一项	{}
minWidth	菜单容器最小宽度	`number` \	`string`	`false`	`none`
maxWidth	菜单容器最打宽度	`number` \	`string`	`false`	`none`
zIndex	菜单层级	`number` \	`string`	`false`	`3`

组件Vue3Menus参数

属性	描述	类型	是否必填	默认值	插槽传入值
open	控制菜单组件显示: `v-model:open`	`boolean`	`true`	`false`	`false`
default	默认插槽	`Slot`	`false`	-	`activeIndex`: 当前选中项, `item`: 当前菜单属性值
icon	图标插槽	`Slot`	`false`	-	`activeIndex`: 当前选中项, `item`: 当前菜单属性值
label	菜单标题插槽	`Slot`	`false`	-	`activeIndex`: 当前选中项, `item`: 当前菜单属性值
suffix	菜单后缀插槽	`Slot`	`false`	-	`activeIndex`: 当前选中项, `item`: 当前菜单属性值

指令使用配置

指令使用方式	描述	参数类型	参数是否必填	默认值
v-menus	绑定元素右击打开菜单	`MenuOptions`	`true`	-
v-menus:all	绑定元素左右击均可打开菜单	`MenuOptions`	`true`	-
v-menus:left	绑定元素左击打开	`MenuOptions`	`true`	-
v-menus:right	绑定元素右击打开	`MenuOptions`	`true`	-