找回密码
 立即注册

QQ登录

只需一步,快速开始

kyonctw

注册会员

5

主题

15

帖子

76

积分

注册会员

积分
76
kyonctw
注册会员   /  发表于:2021-8-25 15:05  /   查看:2578  /  回复:6
1金币
image.png195836486.png
怎么把这个按钮加长,然后从上往下放4个长文本呢
image.png147859191.png

最佳答案

查看完整内容

您好, 参考下方代码: 最终效果如下图(图标需自己设置):

6 个回复

倒序浏览
最佳答案
最佳答案
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-8-25 15:05:01
来自 2#
您好,
参考下方代码:
  1. const operateRibbon = {
  2.     id: "operate",
  3.     text: "操作",
  4.     buttonGroups: []
  5. };

  6. //定义点击 规划求解 按钮时对应的命令
  7. const operateCommands = {
  8.     solver: {
  9.         title: "规划求解",
  10.         text: "很长很长的文字",
  11.         commandName: "solver",
  12.         execute: async (context) => {
  13.             console.log("aaa");
  14.             excelSolver(context);
  15.         },
  16.         iconClass: "ribbon-button-upload"
  17.     }
  18. }

  19. //新增 规划求解 按钮
  20. const operateConfig = {
  21.     label: "规划求解",
  22.     thumbnailClass: "ribbon-thumbnail-spreadsettings",
  23.     commandGroup: {
  24.         children: [
  25.             {
  26.                 direction: "vertical",
  27.                 children: [
  28.                     {commands: ["solver"]},
  29.                     {commands: ["solver"]},
  30.                     {commands: ["solver"]}
  31.                 ]
  32.                
  33.             }
  34.         ]
  35.     }
  36. }

  37. //在designer的config中加入自定义的命令和按钮
  38. operateRibbon.buttonGroups.push(operateConfig);
  39. 1
  40. const designerConfig = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));

  41. //将命令注册到config的commandMap属性上
  42. designerConfig.commandMap = {};
  43. Object.assign(designerConfig.commandMap, operateCommands);

  44. //将新增选项卡添加到designerConfig中
  45. designerConfig.ribbon.push(operateRibbon);
  46. var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), designerConfig);
  47. 17
复制代码
最终效果如下图(图标需自己设置):
image.png826641235.png
回复 使用道具 举报
kyonctw
注册会员   /  发表于:2021-8-25 17:17:08
3#
Lynn.Dou 发表于 2021-8-25 17:05
您好,
参考下方代码:
最终效果如下图(图标需自己设置):

感谢,我一会试一下,顺带问一下,如果我想把文字左对齐怎么做比较好
回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-8-25 18:15:57
4#
"文字左对齐"具体指的是什么?
还请结合截图等信息详细描述下需求。
回复 使用道具 举报
kyonctw
注册会员   /  发表于:2021-8-26 09:26:26
5#
本帖最后由 Clark.Pan 于 2021-8-26 09:47 编辑

没事,你给我的代码可以直接左对齐



在command中加   iconClass: "ribbon-button-upload"  里面的文字就会左对齐,虽然不知道为啥
image.png414574279.png
image.png240188292.png
image.png423033751.png
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-8-26 09:39:58
6#
kyonctw 发表于 2021-8-26 09:26
没事,你给我的代码可以直接左对齐

解决了就好,有新问题欢迎开新帖交流~
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-8-26 09:47:35
7#
已经帮您删除了
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部