数据模板使用 1.2+

数据模板一般用于文字组件的数据面板中。

示例

以下示例中使用通用标题组件来举例。

示例一： 模板中使用{0} {1}

1. 新建大屏，从左侧边栏文字页签中拖拽通用标题组件到画布中。

2. 在右侧边栏的数据页签中，点击编辑数据，点击添加列，新增title1、title2两条数据，并将 title1 和 title2 拖拽到标题区域中。

   

3. 点击标题右侧按钮，修改标题模板，通用标题内容跟随变化。

   

   提示：

   {0}代表配置的第一个的数据内容（title），{1}代表配置的第二个的数据内容（title1），{2}代表配置的第三个的数据内容（title2）。

示例二： 模板中使用普通字符

1. 同示例一中的第 1 步，在画布中添加一个通用标题组件。

2. 在右侧边栏数据页签下点击标题后的按钮，将弹窗中内容修改为普通字符，通用标题的内容就变为了普通字符。

   

示例三： 模板中使用 html 标签

数据模板中使用可以 html 标签，实现图片或图标展示。

1. 同示例一中的第 1 步，在画布中添加一个通用标题组件。

2. 在右侧边栏数据页签下点击标题后的按钮。

   内容修改为 img 标签，可以展示图片。

   

   提示：

   图片地址可以是 http://或者 https://开头的外网的地址， 也可以是项目本地的图片路径，例如./static/template/TJ1/material/bg.png

   内容修改为 i 标签，可以展示 element 图标。

   

警告：

html 只用于展示，添加的 js 事件是不生效的, 例如： onclick。

示例四： 模版中使用变量

数据模板中可以使用变量池中变量。 以按钮组为例。

1. 新建大屏，按照配置按钮组数据资源引入按钮组并绑定变量。

2. 从左侧边栏文字页签中拖拽通用标题组件到画布中，点击标题右侧按钮，修改标题模板，添加{var_index}。

   

3. 进入预览页，查看效果。发现切换按钮时，使变量index值发生了变化，从而触发了标题内容的更新。示例如下：