1分鐘Vue實現右鍵菜單
高效實現需求,避免重復造輪子。今天給大傢分享的是,如何在最短的時候內實現右鍵菜單。方法也很簡單,一個插件就可以搞定,話不多說,上效果圖:
效果圖
安裝
npm install vue-contextmenujs
或
yarn add vue-contextmenujs
使用
import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu);
代碼實現
以element-ui圖標為例實現右鍵菜單,圖標會為被渲染為<i class=”icon”></i>,代碼如下:
<template> <div style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div> </template> <script> import Vue from 'vue' import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); export default { methods: { onContextmenu(event) { this.$contextmenu({ items: [ { label: "返回(B)", onClick: () => { this.message = "返回(B)"; console.log("返回(B)"); } }, { label: "前進(F)", disabled: true }, { label: "重新加載(R)", divided: true, icon: "el-icon-refresh" }, { label: "另存為(A)..." }, { label: "打印(P)...", icon: "el-icon-printer" }, { label: "投射(C)...", divided: true }, { label: "使用網頁翻譯(T)", divided: true, minWidth: 0, children: [{ label: "翻譯成簡體中文" }, { label: "翻譯成繁體中文" }] }, { label: "截取網頁(R)", minWidth: 0, children: [ { label: "截取可視化區域", onClick: () => { this.message = "截取可視化區域"; console.log("截取可視化區域"); } }, { label: "截取全屏" } ] }, { label: "查看網頁源代碼(V)", icon: "el-icon-view" }, { label: "檢查(N)" } ], event, // 鼠標事件信息 customClass: "custom-class", // 自定義菜單 class zIndex: 3, // 菜單樣式 z-index minWidth: 230 // 主菜單最小寬度 }); return false; } } }; </script>
菜單選項都在items數組裡面,可根據需要自行配置。這時候點擊右鍵,菜單彈窗就神奇地出現瞭,是不是很簡單!
自定義樣式
打開控制臺,查看元素即可查看到菜單的各個 class 名稱。最外層的 class 為上面的customClass屬性設置的值,樣式可根據需求自行調整。
<style> .custom-class .menu_item__available:hover, .custom-class .menu_item_expand { background: #ffecf2 !important; color: #ff4050 !important; } </style>
總結
以上就基本使用方法,是不是比自己封裝節省瞭大把時間。註意菜單會在點擊左鍵或者滾輪滾動時自動銷毀,同時也可調用this.$contextmenu.destroy()在其他場景自行銷毀 。以下是插件的參數配置:
MenuOptions 菜單屬性
MenuItemOptions 選項屬性
到此這篇關於1分鐘Vue實現右鍵菜單的文章就介紹到這瞭,更多相關Vue 右鍵菜單內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue contextmenujs鼠標右鍵菜單高度不夠顯示不全的問題及解決方法
- vue+quasar使用遞歸實現動態多級菜單
- vue配置文件自動生成路由和菜單實例代碼
- 基於Vue技術實現遞歸組件的方法
- vue中的el-tree @node-click傳自定義參數