设计器添加按钮的问题

Ellia.Duan

config.commandMap = {
Welcome: {
title: '保存',
text: '保存',
iconClass: 'ribbon-button-welcome',
bigButton: 'true',
commandName: 'Welcome',
execute: async () => {
},
},
}
config.ribbon[0].buttonGroups.unshift({
label: '保存',
thumbnailClass: '保存',
commandGroup: {
children: [
{
direction: 'vertical',
commands: ['Welcome'],
},
],
},
})

复制代码

custom.css文件中
.ribbon-button-welcome {
background-image: url('./save.jpeg');
background-size: 35px 35px;
}
但是这个按钮的图片没有出来，点击保存也没有反应，问题出在那个地方了
image.png474636535.png

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2023-1-13 11:04 编辑

您好，您可以参考如下代码做相应修改，这边测试点击保存按钮是可以执行execute方法的

image.png466509398.png

let designerConfig = GC.Spread.Sheets.Designer.DefaultConfig;
designerConfig.ribbon[0].buttonGroups.unshift({
label: '保存',
thumbnailClass: '保存',
commandGroup: {
children: [
{
direction: 'vertical',
commands: ['Welcome'],
},
],
},
})
designerConfig.commandMap = {};
Object.assign(designerConfig.commandMap, {
Welcome: {
title: '保存',
text: '保存',
iconClass: 'ribbon-button-welcome',
bigButton: 'true',
commandName: 'Welcome',
execute: async () => {
console.log(111)
},
},
});
designer.setConfig(designerConfig);
designer.refresh();

复制代码

至于图片出不来，您可以检查下您的路径是否正确，这边的css样式如下，是可以正常显示图片的
image.png895706787.png

shmkp · shmkp

Ellia.Duan 发表于 2023-1-13 11:02
您好，您可以参考如下代码做相应修改，这边测试点击保存按钮是可以执行execute方法的

let config: any = DesignerGC.Spread.Sheets.Designer.DefaultConfig
let designer: any = new DesignerGC.Spread.Sheets.Designer.Designer(
'gc-designer-container'
)
config.ribbon[0].buttonGroups.unshift({
label: '保存',
thumbnailClass: '保存',
commandGroup: {
children: [
{
direction: 'vertical',
commands: ['Welcome'],
},
],
},
})
config.commandMap = {}
Object.assign(config.commandMap, {
Welcome: {
title: '保存',
text: '保存',
iconClass: 'ribbon-button-welcome',
bigButton: 'true',
commandName: 'Welcome',
execute: async () => {
console.log(111)
},
},
})
designer.setConfig(config)
designer.refresh()

复制代码

shmkp · shmkp

shmkp 发表于 2023-1-13 11:11

let config: any = DesignerGC.Spread.Sheets.Designer.DefaultConfig
let designer: any = new DesignerGC.Spread.Sheets.Designer.Designer(
   'gc-designer-container'
)
config.ribbon[0].buttonGroups.unshift({
   label: '保存',
   thumbnailClass: '保存',
   commandGroup: {
      children: [
      {
         direction: 'vertical',
         commands: ['Welcome'],
      },
      ],
   },
})
config.commandMap = {}
Object.assign(config.commandMap, {
   Welcome: {
      title: '保存',
      text: '保存',
      iconClass: 'ribbon-button-welcome',
      bigButton: 'true',
      commandName: 'Welcome',
      execute: async () => {
      console.log(111)
      },
   },
})
designer.setConfig(config)
designer.refresh()
image.png362518309.png