获取组件属性值
在应用构建过程中,需要快速获取组件的某些属性值直接使用,例如,获取单行输入组件的输入值,下拉选择的选项值,表格组件指定行的某个字段值,图片组件的 src 地址,按钮组件的文本内容等。下面提供获取组件属性值的方法供参考:
对于微搭组件,可以通过 $w.id.xx
获取组件的属性值,下面以单行输入、下拉选择、数据表格、按钮组件、图片组件为例做介绍:
单行输入组件
想要把单行输入组件的输入值给文本进行内容展示,添加一个单行输入组件,复制单行输入组件的 ID,添加一个文本组件。
文本内容绑定表达式
$w.input1.value
(其中 input1 为单行输入组件的组件 ID,value 为要获取的 input 值属性名称)。
在单行输入中输入内容,单行输入的输入值可以显示在文本中。
下拉选择组件
想要获取下拉选择组件的选项值,赋值给单行输入组件,可以在编辑器中添加下拉选择和单行输入组件,赋值下拉选择组件的 ID。
可以配置选项名称和对应的选项值。
单行输入组件的输入值绑定
$w.select1.value
(其中 select1 为下拉选择组件的组件 ID,value 为要获取的选项值属性名称)。
下拉选择中选择一个选项,可以看到单行输入中显示了选项对应的选项值的内容。
数据表格组件
想要把数据表格中某一行某个字段的值获取后赋值给单行输入组件,首先编辑器中添加一个单行输入组件和数据表格组件(数据表格组件绑定数据模型)。
示例中绑定了一个点赞数据的数据模型,字段名称点赞数(字段标识为 dzs),该数据模型中有一条初始化数据。
单行输入组件绑定表达式
$w.table1.records[0].dzs
,可以看到输入值显示数据模型中的点赞数5(table1 为数据表格组件 ID,通过 $w.table1.records
获取表格数据,获取到的数据为一个数组,dzs 为数据模型中的字段标识,可以通过 $w.table1.records[0].dzs
获取第一条数据的点赞树,同理获取第二条数据的点赞数可以写如下表达式:$w.table1.records[1].dzs
)。
?微搭组件标准化改造工作进行中,标准化的组件都已经标注了 Wd 标识,带有 Wd 标识的组件都提供了规范化的属性 API。
以数据表格(已完成标准化改造)组件为例,请参见 数据表格组件属性 API 文档,标准的属性 API 文档中的属性都可以通过
$w.id.xxx
获取(xxx 可以是下图红框中的 dataSourceType、pageNo 等)。未标注 Wd 的组件在标准化进行中,标准化改造完成之后会以文档的形式开放和同步组件的属性 API。
按钮组件
想要实现把按钮组件的文本内容(提交按钮)显示在单行输入的输入内容中,可以先拖进一个按钮组件,修改文本内容为“提交按钮”,复制按钮组件的组件 ID(button1)。
继续添加一个单行输入组件,单行输入组件的输入值绑定表达式
$w.button1.text
(其中 button1 为按钮组件的组件 ID,text 为要获取的按钮文本属性名称)。
绑定后效果如下,按钮的文本内容可以显示在单行输入的输入框中。
图片组件
想要把图片组件的图片地址取得后显示在文本组件中,可以添加一个图片和一个文本组件,文本组件的文本内容绑定 $w.image1.src
(其中 image1 为图片组件的组件 ID,src 为要获取的图片地址属性名称)。