vue如何在表格中實(shí)現(xiàn)右鍵菜單

更新時(shí)間：2024年04月26日 09:07:05 作者：球球和皮皮

這篇文章主要介紹了vue如何在表格中實(shí)現(xiàn)右鍵菜單問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

最近公司的管理系統(tǒng)又要添加新功能，需求是為表格數(shù)據(jù)添加右鍵菜單，操作當(dāng)前選中行的屬性。

剛開(kāi)始想的是直接控制DOM樹(shù)生成一個(gè)HTML編寫(xiě)的菜單，掛載到右鍵點(diǎn)擊的位置。

但是我覺(jué)得vue這么強(qiáng)大，肯定有右鍵組件，肯定比自己寫(xiě)的好看。

不查不知道，一查居然發(fā)現(xiàn)vue原生支持右鍵菜單，當(dāng)機(jī)立斷，用原生右鍵菜單。

安裝

npm install vue-contextmenujs

一、實(shí)現(xiàn)效果

老規(guī)矩，先來(lái)個(gè)成果圖，有需要再往下看。

二、使用步驟

1、表格實(shí)現(xiàn)

我的表格用的是avue-crud，暫時(shí)不詳細(xì)介紹這個(gè)表格組件了，總之就是功能很強(qiáng)大，比el-table強(qiáng)大的多。

下邊的屬性介紹一下：

page：表格的頁(yè)碼顯示，包括currentPage、pageSize、total等等。
data：表格數(shù)據(jù)
option：表格屬性配置
v-loading：加載動(dòng)畫(huà)
@row-contextmenu：對(duì)表格數(shù)據(jù)的右鍵操作
@size-change：對(duì)每頁(yè)展示多少條數(shù)據(jù)的改變操作
@current-change：翻頁(yè)操作
@select：選中操作
@select-all：全選操作

<avue-crud
   ref="crud"
   :page.sync="detailPage"
   :data="tableData"
   :option="tableOption"
   v-loading="loading"
   @row-contextmenu="handleContextMenu"
   @size-change="sizeChange"
   @current-change="currentChange"
   @select="handleSelect"
   @select-all="handleSelectAll">
 </avue-crud>

這些操作可以參考avue官網(wǎng)，具體怎么設(shè)置先不細(xì)說(shuō)了，主要介紹右鍵菜單。

和右鍵菜單對(duì)應(yīng)的就是@row-contextmenu方法，監(jiān)聽(tīng)了對(duì)表格數(shù)據(jù)的右鍵點(diǎn)擊事件。

我們?cè)谶@個(gè)方法里綁定生成菜單的函數(shù)，我這里起的名字是handleContextMenu

2、生成右鍵菜單

表格做好了，右擊事件也綁定好了，接下來(lái)就是生成右鍵菜單。

handleContextMenu(item, index) {
      this.$contextmenu.destroy();
      this.$contextmenu({
        items: [
          {
            label: "屬性",
            onClick: () => {
              // 記錄當(dāng)前右鍵操作
              store.commit("SET_RIGHT_TYPE", "viewResourceNature");
              this.$refs.attrBox.visible = true;
            },
          },
          {
            label: "標(biāo)簽設(shè)置",
            icon: "el-icon-discount",
            disabled: !(current.Editable),
            onClick: () => {
              // 記錄當(dāng)前右鍵操作
              store.commit("SET_RIGHT_TYPE", "setPictureTag");
              this.setTag(item);
            },
          },
          {
            label: "電子圖冊(cè)",
            divided: true,
            onClick: () => {
              // 記錄當(dāng)前右鍵操作
              store.commit("SET_RIGHT_TYPE", "electronicAtlas");
              this.$refs.electronicBox.visible = true;
            },
            children: [
              {
                label: "截取可視化區(qū)域",
                onClick: () => {
                  this.message = "截取可視化區(qū)域";
                }
              },
              { label: "截取全屏" }
            ]
          },
          {
            label: "渠道名稱(chēng)設(shè)置",
            onClick: () => {
              // 記錄當(dāng)前右鍵操作
              store.commit("SET_RIGHT_TYPE", "abilityNames");
              this.$refs.abnBox.visible = true;
            },
          }
        ],
        event,
        customClass: "resource-context-menu",
        zIndex: 999,
        minWidth: 200,
      });
      return false;
    }

生成右鍵菜單要調(diào)用this.$contextmenu()方法。參數(shù)是一個(gè)對(duì)象：基本包含以下屬性：

{
	// 菜單內(nèi)容
	item：[],
	// 自定義樣式
    customClass: "resource-context-menu",
    // 層級(jí)
    zIndex: 999,
    // 最小寬度
    minWidth: 200,
}

從我的例子也能看出來(lái)，最重要的是item屬性，配置的是右鍵菜單中的每一項(xiàng)。

item中可以設(shè)置：

菜單名稱(chēng)：label：“菜單名稱(chēng)”
菜單前置圖標(biāo)：icon：“el-icon-discount”
菜單底部分割線：divided：true
菜單點(diǎn)擊事件：onClick: () => {}
子菜單：children：[]

每次生成新的右鍵菜單前，先把舊的銷(xiāo)毀。

this.$contextmenu.destroy();

3、監(jiān)聽(tīng)鼠標(biāo)滾動(dòng)事件，清除右鍵菜單

突然發(fā)現(xiàn)有這么個(gè)問(wèn)題：當(dāng)列表數(shù)據(jù)過(guò)多時(shí)，我們需要滾動(dòng)表格去查看下面的數(shù)據(jù)，這時(shí)候右鍵菜單的位置就和表格的數(shù)據(jù)對(duì)不上了。

這時(shí)候需要加個(gè)鼠標(biāo)滾動(dòng)事件的監(jiān)聽(tīng)，當(dāng)鼠標(biāo)滾輪事件發(fā)生時(shí)，清除右鍵菜單。

代碼實(shí)現(xiàn)如下：

mounted() {
	// 先把瀏覽器自帶的右鍵功能屏蔽掉
   this.$nextTick(() => {
     // 禁止右鍵
     document.oncontextmenu = new Function("event.returnValue=false");
   });
   // 監(jiān)聽(tīng)頁(yè)面滾動(dòng)事件
   window.addEventListener('scroll', this.handleScroll, true)
 },
beforeDestroy() {
  // 離開(kāi)頁(yè)面時(shí)，清除頁(yè)面滾動(dòng)事件
  window.removeEventListener('scroll', this.handleScroll, true)
  this.$nextTick(() => {
    // 放開(kāi)對(duì)瀏覽器右鍵的禁止
    document.oncontextmenu = new Function();
  });
},
methods: {
	// 頁(yè)面滾動(dòng)時(shí)清除右鍵菜單，避免位置混淆
    handleScroll () {
      this.$contextmenu.destroy();
    }
}