Derrick.Jiao 发表于 2022-2-11 14:33:03

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

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


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


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

设置完成后,我们的按钮按下之后也会有选中的状态更新。

页: [1]
查看完整版本: 自定义有选中效果的command(组件化编辑器)