单项选择器 Radio-Group

单选组:l-radio-group。作为多个单选项目的父容器,用过来控制单选逻辑,内部由多个l-radio组件组成。

单选项目 Radio

单选项目,l-radio。必须与Radio-Group搭配使用。

基本常识

l-radio必须与l-radio-group搭配使用,且每个l-radio必须指定一个key作为单选项目的唯一标识

基础案例

单选组内部由多个l-radio组成,注意设置key。如果你的数据是动态,也可以使用wx:for进行列表渲染,通常key应该设置为 真实数据的id号,或者是数组的序号index。

示例代码

  1. <l-radio-group>
  2. <l-radio key="1">七秀</l-radio>
  3. <l-radio key="2">五毒</l-radio>
  4. <l-radio key="3">长歌</l-radio>
  5. </l-radio-group>

两种模式与选中项

TIP

单选组件支持两种模式:

  1. 可以全部不选中
  2. 至少选中1项

模式1 是默认模式。模式1支持反选,当一个radio被选中时,再次点击将取消选中,但模式2不可以。 将l-radio-group上设置none-checked属性设置为false可以切换到模式2。 对于模式2,为保证初始化时至少有一项被选中,l-radio-group必须设置current属性,current属性可以设置为任何一个l-radio的key。 这样,在初始化时,组件将对应的key的l-radio设置为选中状态。 注意,模式1同样可以设置current,但这不是必须的。

示例代码

  1. <l-radio-group current="2" none-checked="{{false}}">
  2. <l-radio key="1">七秀</l-radio>
  3. <l-radio key="2">五毒</l-radio>
  4. <l-radio key="3">长歌</l-radio>
  5. </l-radio-group>

设置radio-group布局方式

通过placement属性设置radio-group布局方式。

示例代码

  1. <l-radio-group placement="column">
  2. <l-radio key="1">七秀</l-radio>
  3. </l-radio-group>

设置radio布局方式

通过placement属性设置radio布局方式。

示例代码

  1. <l-radio-group>
  2. <l-radio key="1" placement="right">七秀</l-radio>
  3. </l-radio-group>

设置选中项的颜色及大小

当我们需要改变radio选中时的颜色时,可以通过colorselect-color 属性来设置。

通过size属性设置radio图标大小。

示例代码

  1. <l-radio color="red" size="32" select-color="green">
  2. 长歌
  3. </l-radio>

设置禁用

当我们需要将某一个选项禁用时,设置 disabledtrue 即可。

示例代码

  1. <l-radio disabled="{{true}}">
  2. 七秀
  3. </l-radio>

自定义Radio的内容部分

通过 <slot> 的方式可以自定义Radio组件的内容部分。

通过设置custom属性自定义左侧图标。

示例代码

  1. <l-radio custom="{{true}}">
  2. <image slot="custom" src="path/to/img.png" class="img"/>
  3. <text>七秀</text>
  4. </l-radio>

单选组件属性(Radio Attributes)

参数说明类型可选值默认值
sizeradio的大小String/Number—-36
cell可绑定一个Object对象,在linchange事件触发时,将返回这个当前单选项的cellObject—-—-
colorradio未选中时的颜色String—-
select-colorradio选中时的颜色String—-
placement更改radio的布局方式Stringright/leftleft
disabled设置是否禁用Boolean—-false

单选组件外部样式类(Radio ExternalClasses)

外部样式类名说明备注
l-class设置radio的外部样式类—-
l-disabled-class设置radio禁用时的外部样式类—-

单项选择器组件属性(Radio-Group Attributes)

参数说明类型可选值默认值
current设置当前被选中的radio,其值必须是radio的keyString—-—-
placement更改radio-group的布局方式Stringrow/columncolumn
none-checked为true时允许全部单选项都不选中,否则至少选择一项Booleantrue/falsetrue

单项选择器事件 (Radio-Group Events)

事件名称说明返回值备注
bind:linchange切换radio时触发选中项发生变化时触发 linchange 事件,event.detail = {checked,key, currentKey,cell}-