组件化编辑器自定义——状态栏图标按钮
本帖最后由 Derrick.Jiao 于 2021-10-13 18:12 编辑在我们的组件化编辑器推出之后,有小伙伴想要能够像在SpreadJS中那样定制状态栏,甚至是将对应的图标添加到状态栏上。但是我们在14.2之前,是没有接口或者方法可以直接获取的。针对这个问题,我们暴露了一个findControl接口,这样我们就可以获取状态栏实例了。获取到这个实例之后,我们就能根据自己的需求进行定制。
那么接下来我们看下如何实现设计器上状态栏的自定义。
在14.2中,这个查找状态栏的实例的接口为
var statusBar = GC.Spread.Sheets.StatusBar.findControl(document.getElementsByClassName("gc-statusBar"));
接着,通过自定义状态项 GC.Spread.Sheets.StatusBar.StatusItem 类的onCreateItemView方法, 为状态条创建项目元素。这个方法可以被复写以自定制对应的状态项UI。var StatusItem = GC.Spread.Sheets.StatusBar.StatusItem;
function Popup(name, options) {
StatusItem.call(this, name, options);
}
Popup.prototype = new StatusItem();
Popup.prototype.onCreateItemView = function (container) {
var item = document.createElement('div');
item.style.padding = "0 3px";
item.innerHTML = `<img src='data:image/png;base64,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' height='20' width='20'></img>`;
container.appendChild(item);
container.addEventListener('click', function () {
alert('我是图标按钮');
})
};
在上面的代码中,我们通过innerHTML插入img标签,以及为这个容器添加了点击事件。
最后,我们再将其添加到statusBar中
statusBar.add(new Popup('Popup', { menuContent: 'popup item', tipText: 'popup' }));
下载附件即可查看完整demo。
页:
[1]