自定义有选中效果的command（组件化编辑器）

收藏

用过我们组件化编辑器的朋友，应该对编辑器上方工具栏的按钮并不陌生。以对齐方式为例，在点击按钮后，有一个选中的背景色。
image.png213812865.png

那有用户就想通过这样的方式去标记点击过的按钮。这个应该怎么实现呢？
我们的api中有两个接口是用于获取状态和设置状态的，一个是getData另一个是setData。我们可以用这两个接口来更新我们按钮的状态。提到更新按钮的状态，还有一个就是命令定义中的getState，这个方法可以用来返回状态给我们的command自身。
简单来说就是，command点击后或者刷新后，会调用getState，然后将getState返回值，交给component。当与component交互时，会调用command的execute方法，将component的变化更新到状态上，形成一个环。并且所有UI上的持久性状态，都是有对应的data来保持。以上就是一个基本的原理，接下来我们再来看一下这样一个command应该如何定义。
image.png512160338.png

在上面的代码中，我们定义了一个叫welcome的command对象，有几个属性我们可以看下，第一个是iconClass，这个是用于定义这个command对应的图表的css，也就是这个标签的类，我们在css中就能通过这个类名来添加样式。第二个是execute，用于处理我们按下按钮的逻辑。在这里面我们通过setData来处理getState返回的值。第三个就是getState，用于返回command自身最新的状态，通过getData获取。

设置完成后，我们的按钮按下之后也会有选中的状态更新。
image.png208193358.png

		自动登录	找回密码
密码			立即注册

自定义有选中效果的command（组件化编辑器）

0 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证