vue3-menus

Vue3.0 自定義右鍵菜單

Vue3.0 原生實現(xiàn)完全自定義右鍵菜單組件, 零依賴，可根據(jù)可視區(qū)域自動調(diào)節(jié)顯示位置，可支持插槽完全重寫每一項菜單

項目地址

• GitHub
• Gitee

在線演示

• 完整菜單功能演示
• 復制粘貼演示

快速安裝

npm 安裝

npm install vue3-menus

或

yarn add vue3-menus

CDN

<script src="https://unpkg.com/vue3-menus/dist/vue3-menus.umd.min.js">

使用

CDN引入則不需要 app.use(Vue3Menus)

樣例中使用的是@ant-design/icons-vue圖標與@element-plus/icons圖標、圖標可以使用html代碼傳入、也可以通過插槽自定義圖標、也可以完全重寫每一項菜單

// 全局注冊組件、指令、方法 import { createApp } from 'vue'; import Menus from 'vue3-menus'; import App from './App.vue'; const app = createApp(App); app.use(Menus); app.mount('#app'); // 單個注冊某個，以下三種方式均可在單個文件內(nèi)使用 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'); <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 v-model:open="isOpen" :event="eventVal" :menus="menus.menus" hasIcon><template #icon="{item: {activeIndex}}">{{activeIndex}}</template><template #label="{ item: { item } }">插槽：{{ item.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: "點擊不關(guān)閉菜單",tip: '不關(guān)閉菜單',click: () => {return false;}},{label: "前進(F)",tip: 'Alt+向右箭頭',disabled: true},{label: "重新加載(R)",tip: 'Ctrl+R',icon: {node: SyncOutlined,option: {spin: true}},click: () => location.reload(),divided: true},{label: "另存為(A)...",tip: 'Ctrl+S'},{label: "打印(P)...",tip: 'Ctrl+P',icon: {node: Printer,option: {color: 'red'}},click: () => window.print(),},{label: "投射(C)...",divided: true},{label: '發(fā)送到你的設(shè)備',icon: WindowsOutlined,children: [{label: 'iPhone',},{label: 'iPad'},{label: 'Windows 11'}]},{label: "為此頁面創(chuàng)建二維碼",divided: true,icon: {node: QrcodeOutlined,option: {style: {color: 'aqua'}}}},{label: "使用網(wǎng)頁翻譯(F)",divided: true,children: [{ label: "翻譯成繁體中文" },{ label: "翻譯成繁體中文" },{label: "百度翻譯", children: [{ label: "翻譯成繁體中文" },{ label: "翻譯成繁體中文" },]},{label: "搜狗翻譯", children: [{ label: "翻譯成繁體中文" },{ label: "翻譯成繁體中文" },]},{label: "有道翻譯", children: [{ label: "翻譯成繁體中文" },{ label: "翻譯成繁體中文" },]},]},{label: "截取網(wǎng)頁(R)"},{ label: "查看網(wǎng)頁源代碼(U)", tip: 'Ctrl+U' },{ label: "檢查(N)", tip: 'Ctrl+Shift+I' }]})return { menus, isOpen, rightClick, eventVal }}, }); </script> .div {display: inline-block;background-color: aqua;margin: 0 20px;line-height: 200px;padding: 0 20px;height: 200px; }

指令方式使用

<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: "點擊不關(guān)閉菜單",tip: '不關(guān)閉菜單',click: () => {return false;}}]})return { menus }}, }); </script>

方法方式使用

<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: "點擊不關(guān)閉菜單",tip: '不關(guān)閉菜單',click: () => {return false;}}]});function rightClick(event) {menusEvent(event, menus.value);event.preventDefault();}return { rightClick }}, }); </script>

組件方式使用

<template><div class="div" @click.stop @contextmenu="rightClick">組件方式打開菜單</div><vue3-menus v-model:open="isOpen" :event="eventVal" :menus="menus" hasIcon><template #icon="{item: {activeIndex}}">{{activeIndex}}</template><template #label="{ item: { item } }">插槽：{{ item.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: "點擊不關(guān)閉菜單",tip: '不關(guān)閉菜單',click: () => {return false;}}]);return { menus, isOpen, rightClick, eventVal }}, }); </script>

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換成其他版本號}} }

參數(shù)說明

單個菜單項參數(shù)MenusItemOptions

屬性描述類型是否必填默認值

label	菜單項名稱	string	true	—
style	每一項菜單的自定義樣式	object	false	{}
icon	string: 傳入圖標html代碼、object: 傳入組件或者{node: 組件, option: 組件配置參數(shù)}	string | object	false	undefined
disabled	是否禁用菜單項	boolean	false	undefined
divided	是否顯示分割線	boolean	false	undefined
tip	沒項菜單后面的小提示	string	false	''
click	菜單項點擊事件，返回null或false不關(guān)閉菜單	Function()	false	undefined
children	子菜單列表信息	MenusItemOptions[]	false	undefined

公共參數(shù)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	菜單容器最打?qū)挾?/td>	number | string	false	none
zIndex	菜單層級	number | string	false	3

組件Vue3Menus參數(shù)

屬性描述類型是否必填默認值插槽傳入值

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: 當前菜單屬性值

指令使用配置

指令使用方式描述參數(shù)類型參數(shù)是否必填默認值

v-menus	綁定元素右擊打開菜單	MenuOptions	true	-
v-menus:all	綁定元素左右擊均可打開菜單	MenuOptions	true	-
v-menus:left	綁定元素左擊打開	MenuOptions	true	-
v-menus:right	綁定元素右擊打開	MenuOptions	true	-

總結(jié)

以上是生活随笔為你收集整理的Vue3.0实现原生高度可自定义菜单组件vue3-menus的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。