组件版设计器自定制之动态更改工具栏图标
本帖最后由 Lynn.Dou 于 2023-11-28 14:54 编辑背景：
用户期望根据不同的状态去动态更改工具栏按钮的图标，应该如何实现呢？
实现思路：
组件版设计器提供了不同的状态，这些状态可以在命令选项中定义，以显示特定的布局。如下：
[*]inDropdown : 表示命令处于下拉列表中。
[*]isToolbarMode : 表示工具栏功能区模式。
如果想自定义状态变量，可以用 designer.setData方法。
并且，designer支持结合IF、AND、NOT等公式表达式在命令选项中定义上述状态，如下示例：
text: '=IF(isToolbarMode,"Toolbar Ribbon","Default Ribbon")'
iconClass: '=IF(inDropdown, "ribbon-button-sjs","ribbon-button-hi")'
bigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))'所以回到需求本身，我们可以定义一个变量，结合IF公式用来动态控制iconClass显示的图标。
主要代码如下：
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"));
// 自定义状态变量
designer.setData("test", true);
//console.log(designer.getData("test"));
var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: '=IF(test, "ribbon-button-welcome","ribbon-button-spjs")', // IF公式
bigButton: "true",
commandName: "Welcome",
execute: function (context, propertyName, fontItalicChecked) {
alert('Welcome to new designer.');
}
}
}
config.ribbon.buttonGroups.unshift({
"label": "NewDesigner",
"thumbnailClass": "welcome",
"commandGroup": {
"children": [
{
"direction": "vertical",
"commands": [
"Welcome"
]
}
]
}
});
// 设置config
designer.setConfig(config);
document.getElementById("changeIcon").addEventListener("click", function() {
console.log(designer.getData("test"));
designer.setData("test", !designer.getData("test"));
designer.setConfig(config);
})
来看看效果：
附件为完整demo，供参考。
页:
[1]