自定义下拉命令

问题：如何实现自定义下拉命令

背景：

在某些情况下，用户希望在Ribbon自行定义下拉命令来实现业务需求。

实现步骤：

首先添加一个名为“操作”的ribbon。

先定义ribbon对象，然后将其push到config下的ribbon数组中，最后通过setConfig将这个新的配置注入到设计器上。

var customerRibbon = {
  id: "operate",
  text: "操作",
  buttonGroups: [],
};

config.ribbon.push(customerRibbon);
designer.setConfig(config);

完成上面的操作后，可以看到一个名为“操作”的ribbon已经被添加到了工具栏上。

接下来完善buttonGroups里面的内容，下图的每一个红框就是一个buttonGroup。

首先，label是这个buttonGroup的名称；thumbnailClass为页面自适应后这个buttonGroup的缩略图。下面的commandGroup是定义各个命令按钮的集合，里面children的第一个对象是本次要定义的下拉命令的内容。

可以看到，里面有下拉命令（command，如要定义下拉命令，需要重写该命令，否则不生效），命令的类型（type），定义下拉的最大宽度（dropdownMaxWidth），定义下拉的最大高度（dropdownMaxHeight）以及下拉命令的子命令（children）。

完成布局上的操作后，接下来定义上面对应的命令。

可以看到，iconClass是命令所对应的图标，与上面的thumbnailClass类似，可以使用内置的图标，也可使用自定义的css类来设置。可以通过“bigButton”属性来指定该命令是否使用更大的按钮，可以通过text指定这个按钮显示的文本，可以通过direction指定方向。

在定义下拉对应的命令时，可以通过showDropdownButton指定是否显示下拉按钮。最后commandName是定义命令的名称。

完成上面的操作之后，如我们需要自定义的命令能够执行，那么我们需要将其加到commandMap里面：

config.commandMap = {};
Object.assign(config.commandMap, ribbonFileCommands);

最终的实现效果如下：

以上就是自定义下拉命令的增强示例的介绍，下载附件即可查看完整demo。

自定义下拉命令.html

作者: GrapeCity China | 审核：Lynn.Dou | 更新时间：2023.12.28