组件版编辑器菜单的显示机制是
在宽度足够时，会显示每一个按钮分组（buttonGroups）中的所有内容
在列宽不够时，会从后往前依次收缩无法展示的分组,只展示一个有缩略图的下拉按钮
在我们给菜单添加自定义的buttonGroups时，也需要同时设置这个缩略图样式，否则在收缩后就会出现空白
通过下面的代码先来看如何添加一个按钮分组buttonGroups
- let buttonGroupsConfig = {
- "label": "调试",
- "thumbnailClass": "ribbon-thumbnail-test",
- "commandGroup": {
- "children": [
- //小图标
- {
- "direction": "vertical",
- "commands": ["trackCellValue"]
- },
- {
- "direction": "vertical",
- "commands": ["checkisLocked"]
- },
- //分割线
- {
- "type": "separator"
- },
- // 大图标
- {
- "direction": "vertical",
- "commands": ["allowdebug"]
- }
- ]
- }
- }
- designerConfig.commandMap = {};
- Object.assign(designerConfig.commandMap, debugCommands);
- customerRibbon.buttonGroups.push(buttonGroupsConfig);
效果如下
收缩后的效果
在代码中，我们给thumbnailClass设置的是一个自定义的样式 "ribbon-thumbnail-test"
样式的具体内容如下
- .ribbon-thumbnail-test
- { background-image: url(https://gcdn.grapecity.com.cn/static/image/icons/2018/sp-1.png);
- background-size: contain;
- }
通过给此样式设置background-image， 即可在缩略图标上显示你需要的图片。否则，在未设置的情况下，只会显示空白
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图