右键菜单中增加新项但不影响原菜单内容

通过重写onOpenMenu的方式给右键菜单添加项，但原来右键菜单的部分展示项隐藏了，在这个demo基础上怎么修改能实现：不影响原始右键菜单展示的情况下添加项


<template>
  <div id="app">
    <gc-spread-sheets-designer
      :styleInfo="styleInfo"
      :config="config"
      :spreadOptions="spreadOptions"
      @designerInitialized="designerInitialized"
    >
    </gc-spread-sheets-designer>
  </div>
</template>

<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-resources-zh";
GC.Spread.Common.CultureManager.culture("zh-cn");
import "@grapecity/spread-sheets-designer-resources-cn";
import "./custom.css";
import * as ExcelIO from "@grapecity/spread-excelio";

//Apply License
//GC.Spread.Sheets.LicenseKey = 'sjs-distribution-key';
//ExcelIO.LicenseKey = 'sjs-distribution-key';
//GC.Spread.Sheets.Designer.LicenseKey = 'designer-component-distribution-key';

import { Designer } from "@grapecity/spread-sheets-designer-vue";

export default {
  name: "App",
  data: function() {
    var config = GC.Spread.Sheets.Designer.DefaultConfig;
    config.commandMap = {
      Welcome: {
        title: "Welcome",
        text: "Welcome",
        iconClass: "ribbon-button-welcome",
        bigButton: "true",
        commandName: "Welcome",
        execute: async (context, propertyName, fontItalicChecked) => {
          alert("Welcome to new designer.");
        }
      }
    };
    config.ribbon[0].buttonGroups.unshift({
      label: "NewDesigner",
      thumbnailClass: "welcome",
      commandGroup: {
        children: [
          {
            direction: "vertical",
            commands: ["Welcome"]
          }
          // This is custom button ----------------end-------------
        ]
      }
    });
    return {
      styleInfo: { height: "98vh", width: "100%" },
      config: config,
      spreadOptions: {
        sheetCount: 2
      },
      designer: null,
      spread: null
    };
  },
  methods: {
    designerInitialized(value) {
      this.designer = value;
      this.spread = this.designer.getWorkbook();
      // this.registerCommand();
      // this.customContextMenu();
    },
    registerCommand() {
      const myCmd = {
        canUndo: true,
        name: "myCmd",
        execute: (context, options, isUndo) => {
          alert("add_table_command");
        }
      };
      this.spread.commandManager().register("myCmd", myCmd);
    },
    customContextMenu() {
      function MyContextMenu() {}
      MyContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu();
      MyContextMenu.prototype.onOpenMenu = function(
        menuData,
        itemsDataForShown,
        hitInfo
      ) {
        itemsDataForShown.push({
          text: "菜单测试",
          name: "myCmd",
          command: "myCmd",
          workArea: "viewport"
        });
      };
      const contextMenu = new MyContextMenu();
      this.spread.contextMenu = contextMenu;
    }
  }
};
</script>
<style></style>

您说的“三级菜单”是您自己实现的菜单吗？如果是您自己实现的菜单的话需要您那边自行去适配，我们这边只能适配Designer原生的右键菜单。

你好，了解到组件版的右键菜单是不支持三级菜单的，所以通过spread重写onOpenmenu的方式来创建右键三级菜单，但是又要使用原菜单中的部分按钮如 ‘定义名称’、‘标签’，这个怎么写才能让自定义的菜单和 ‘定义名称’、‘标签’按钮同时展示在右键菜单上。

正如楼上热心用户所述，Spread的右键菜单与Designer的右键菜单是不一样的，重写方法也不一样，所以请使用Designer的右键菜单重写方法来重写。

陈皮 发表于 2023-8-15 08:30
你这是spread的写法，设计器designer自定义右键菜单的写法和spread不同

可以参考这个demo：

spread写法无法实现这个功能吗

你这是spread的写法，设计器designer自定义右键菜单的写法和spread不同

可以参考这个demo：
设计器右键插入多行 - JS CodeMine (grapecity.com)

snowflakes7 发表于 2023-8-15 09:01
spread写法无法实现这个功能吗

可以是可以，但是会导致你现在碰到的情况,你要想保留designer原有的菜单结构，就得改成designer自定义右键的写法

下面是spread和designer初始的右键菜单：
spread:

designer: