预览区块

预览区块的目的是为了测试区块的功能可用性,模拟使用时的各种操作。本文介绍如何预览并测试一个配置完成的区块,帮助您及时了解区块的可用性,便于区块的及时修改和完善。

操作步骤

  1. 登录DataV控制台

  2. 工作台页面,单击组件开发模块下的区块,进入区块管理页面。

  3. 区块页面中,鼠标hover在目标区块上,单击查看区块

    image.png
  4. 进入区块编辑器,单击右上角的预览区块图标图标预览区块页面。

  5. 在预览页内,您可以查看区块的整体样式,并通过测试使用预览页面右侧的样式数据事件动作页签中的内容,测试区块内各配置的可用性。

    测试

    操作

    测试样式项

    在样式页签内配置不同的样式,参考配置项说明中的配置说明。

    如下图所示,在样式页签中,将轮播列表组件中的表头配置项内的背景颜色设置成红色。测试样式

    测试数据

    在数据页签内,输入不同的数据内容,并查看内部组件的数据配置和对应的样式是否符合调整的预期。

    如下图所示,可以在右侧数据页签输入额外的数据,单击下方的测试按钮,即可查看对应组件中显示数据内容的变更。

    输入不同数据输入不同数据 测试新增数据成果测试新增数据成果

    测试事件

    在事件页签中,单击某个事件对应区块中的组件,查看组件内部抛出的数据在事件页签中是否正确。

    如下图所示,单击轮播列表组件中的一行数据,可以在右侧轮播列表点击事件页签中的事件响应结果处,监听轮播列表组件被单击时抛出的数据。测试监听事件响应示例

    测试动作

    在动作页签中,针对某个动作输入不同的参数,查看该动作对应内部组件的行为是否符合修改预期。

    如下图所示,可以在右侧动作页签的更新样式下的测试参数输入框中输入颜色参数,把垂直胶囊柱状图的柱子边框颜色变为绿色。

    测试修改动作参数样式
  6. 单击预览页面右上角的返回编辑图标图标,即可返回区块编辑页面继续编辑区块内容。

    如果预览成功且区块内容各功能测试后符合预期,可将区块发布到线上环境供其他人员在后续的数据看板中直接添加使用。