[表格编辑器]旋转器（Spinner）按钮的实现
组件化表格编辑器发布至今已经有比较长的时间了，相信大家基本都会添加一些简单的按钮，像是checkbox、下拉按钮等。那这篇文章主要介绍一个特殊的类型，叫做Spinner，可以理解为旋转器，或者叫微调器。像是页面布局
以及单元格格式里面都会用到这个类型
作用是什么呢？顾名思义就是用于调整一些需要微调的属性，例如缩放比例、边距、缩进等。当然，你也可以根据需求开阔更多使用场景。
那么怎么添加呢？方法和定义普通的button的类似，我们需要指定一个type为spinner，并且给定一个commandOptions对象。里面包含可以配置旋转器的最大最小值以及步长。
type: "spinner",
commandOptions: {
numberEditorOption: {
min: 10,
max: 400,
step: 5,
}
},
最后就是处理execute和getState方法，可能有一些朋友对getState方法不太理解。可以简单理解为刷UI的时候会触发这个方法，这个是为了保证ribbon的状态能够更新。下面的checked是我们可以获取并调整个的旋转器的值。
execute: function (context, propertyName, checked) {
context.setData('spinnerVal', checked);
},
getState: function (context, propertyName) {
var result = context.getData('spinnerVal');
return result ? result : 0;
}实现效果如图
下载附件即可查看完整demo。
页:
[1]