# Radio 单选框

概述

Radio 单项选择器,需结合fui-radio-group和fui-radio组件一起使用。组件中还使用了fui-form-field组件,需要同时引入项目中。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "单选框",
  "usingComponents": {
    "fui-radio-group":"/components/firstui/fui-radio-group/fui-radio-group",
    "fui-radio":"/components/firstui/fui-radio/fui-radio"
  }
}
1
2
3
4
5
6
7
第二种:在根目录app.json文件中全局引入
"usingComponents": {
    "fui-radio-group":"components/firstui/fui-radio-group/fui-radio-group",
    "fui-radio":"components/firstui/fui-radio/fui-radio"
}
1
2
3
4

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基本使用

可通过model:value直接获取选中的值,也可通过change事件来获取。

注意:示例中使用的其他组件请自行引入

<fui-radio-group name="radio" model:value="{{val}}" bindchange="change">
      <view class="fui-list__item">
        <fui-label>
          <view class="fui-align__center">
            <fui-radio value="1"></fui-radio>
            <text class="fui-text">选中</text>
          </view>
        </fui-label>
        <fui-label margin="0 0 0 40rpx">
          <view class="fui-align__center">
            <fui-radio value="2"></fui-radio>
            <text class="fui-text">未选中</text>
          </view>
        </fui-label>
      </view>
</fui-radio-group>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Slots

# fui-radio-group 组件

插槽名称 说明
default 标签显示内容,内部由多个fui-radio组成

# fui-radio 组件

插槽名称 说明
- -

# fui-form-field 组件

该组件主要用于表单传递数据。

插槽名称 说明
default 标签内显示内容,内部由多个fui-radio组成

# Props

# fui-radio-group 组件

属性名 类型 说明 默认值 其他说明
name String 单项选择器名称 - -
value String 选中的value值,用于双向绑定 - -

# fui-radio 组件

属性名 类型 说明 默认值 其他说明
value String value值,当选中时会携带该值 - -
checked Boolean 是否选中 false -
disabled Boolean 是否禁用 false -
color String 选中时背景颜色 - 如果值为空,可以通过css变量(--fui-color-primary)修改默认颜色值
borderColor String 未选中时边框颜色 #ccc -
borderRadius String 圆角值 50% -
isCheckMark Boolean 是否只展示对号,无边框背景,仅styleType=1时有效 false -
checkMarkColor String 对号颜色 ,styleType=1时有效 #fff -
dotColor 2.4.0+ String 圆点颜色 ,styleType=2时有效 - -
scaleRatio Number, String 缩放比例 1 -
styleType 2.4.0+ Number, String 选中后样式类型,可选值:1-checkmark(对号) 2-dot(圆点) 1 -

# fui-form-field 组件

属性名 类型 说明 默认值 其他说明
hidden Boolean 是否为隐藏域 false -

# Events

# fui-radio-group 组件

事件名 说明 回调参数
bind:change 选中项发生变化时触发 event.detail = {
  value
}

示例预览

Last Updated: 5/30/2024, 10:36:22 AM