需求背景
在前端样式控制中,我们经常需要通过点击、切换等事件来实现组件样式的动态更新。本文以点击按钮控制文本组件文字颜色变化为例,进行该场景的介绍说明。
实践方案
1. 在页面中添加2个按钮组件,分别命名为点击变红和点击变绿,再向页面中添加一个文本组件。![](https://qcloudimg.tencent-cloud.cn/image/document/b30d0ae9e928f691c073155694475882.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/b30d0ae9e928f691c073155694475882.png)
2. 再创建一个自定义变量,命名为 var1 。![](https://qcloudimg.tencent-cloud.cn/image/document/9adaf859099d1c51cf9d74db58bf0ee5.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/9adaf859099d1c51cf9d74db58bf0ee5.png)
3. 变量类型选择对象,单击保存。![](https://qcloudimg.tencent-cloud.cn/image/document/600c17af9d439d96cc41143464a497dc.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/600c17af9d439d96cc41143464a497dc.png)
4. 名称为点击变红的按钮:设置点击事件,触发变量赋值,为变量 var1 赋值表达式内容:![](https://qcloudimg.tencent-cloud.cn/image/document/66ef09eafdbbe4eaf1916694d326614f.png)
{color:"red"}
。![](https://qcloudimg.tencent-cloud.cn/image/document/66ef09eafdbbe4eaf1916694d326614f.png)
5. 名称为点击变绿的按钮:设置点击事件,触发变量赋值,为变量 var1 赋值表达式内容:![](https://qcloudimg.tencent-cloud.cn/image/document/ffec93bb478eb3ba9c3d2b094630885b.png)
{color:"green"}
。![](https://qcloudimg.tencent-cloud.cn/image/document/ffec93bb478eb3ba9c3d2b094630885b.png)
6. 文本组件-样式配置的 style 绑定属性中,单击 fx,打开表达式弹窗,输入变量 var1 的路径:![](https://qcloudimg.tencent-cloud.cn/image/document/62f90238f519f013abdc08e9e1d83c37.png)
$w.page.dataset.state.var1
。![](https://qcloudimg.tencent-cloud.cn/image/document/62f90238f519f013abdc08e9e1d83c37.png)
7. 完成以上配置后,单击编辑器右上方绿色的预览,即可体验效果,单击两个按钮,文本颜色会跟随变更。![](https://qcloudimg.tencent-cloud.cn/image/document/760b618bd11d60a09d61c2a83f2fedd7.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/760b618bd11d60a09d61c2a83f2fedd7.png)