[表格编辑器]旋转器（Spinner）按钮的实现

组件化表格编辑器发布至今已经有比较长的时间了，相信大家基本都会添加一些简单的按钮，像是checkbox、下拉按钮等。那这篇文章主要介绍一个特殊的类型，叫做Spinner，可以理解为旋转器，或者叫微调器。
像是页面布局




以及单元格格式里面都会用到这个类型


作用是什么呢？顾名思义就是用于调整一些需要微调的属性，例如缩放比例、边距、缩进等。当然，你也可以根据需求开阔更多使用场景。

那么怎么添加呢？方法和定义普通的button的类似，我们需要指定一个type为spinner，并且给定一个commandOptions对象。里面包含可以配置旋转器的最大最小值以及步长。

1. type: "spinner",
   
2.                         commandOptions: {
   
3.                                 numberEditorOption: {
   
4.                                         min: 10,
   
5.                                         max: 400,
   
6.                                         step: 5,
   
7.                                 }
   
8.                         },

复制代码

最后就是处理execute和getState方法，可能有一些朋友对getState方法不太理解。可以简单理解为刷UI的时候会触发这个方法，这个是为了保证ribbon的状态能够更新。下面的checked是我们可以获取并调整个的旋转器的值。

1. execute: function (context, propertyName, checked) {
   
2.                                 context.setData('spinnerVal', checked);
   
3.                         },
   
4.                         getState: function (context, propertyName) {
   
5.                                 var result = context.getData('spinnerVal');
   
6.                                 return result ? result : 0;
   
7.                         }

复制代码

实现效果如图


下载附件即可查看完整demo。
spinner.html (2.69 KB, 下载次数: 115)

2022-8-15 11:08 上传

点击文件名下载附件