Vue 原生右鍵菜單組件

vue-contextmenujs

Vue 原生實現右鍵菜單組件, 零依賴

項目地址

https://github.com/GitHub-Laziji/menujs

在線演示

快速安裝

npm 安裝

npm install vue-contextmenujs

CDN

<script src="https://unpkg.com/vue-contextmenujs/dist/contextmenu.umd.js">

使用

測試中使用的是 element-ui圖標

import Contextmenu from "vue-contextmenujs"
Vue.use(Contextmenu);

<template>
  <div id="app" style="width:100vw;height:100vh" @contextmenu.prevent="onContextmenu"></div>
</template>

<script>
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,
        //x: event.clientX,
        //y: event.clientY,
        customClass: "class-a",
        zIndex: 3,
        minWidth: 230
      });
      return false;
    }
  }
};
</script>

參數說明

Menu

屬性	描述	類型	可選值	默認值
items	菜單結構信息	MenuItem[]	—	—
event	鼠標事件信息	Event	—	—
x	菜單顯示X座標, 存在event則失效	number	—	0
y	菜單顯示Y座標, 存在event則失效	number	—	0
zIndex	菜單樣式z-index	number	—	2
customClass	自定義菜單class	string	—	—
minWidth	主菜單最小寬度	number	—	150

MenuItem

屬性	描述	類型	可選值	默認值
label	菜單項名稱	string	—	—
icon	菜單項圖標, 生成<i class="icon"></i>元素	string	—	—
disabled	是否禁用菜單項	boolean	—	false
divided	是否顯示分割線	boolean	—	false
customClass	自定義子菜單class	string	—	—
minWidth	子菜單最小寬度	number	—	150
onClick	菜單項點擊事件	Function()	—	—
children	子菜單結構信息	MenuItem[]	—	—

歡迎關注個人博客公衆號