更新记录

1.0.6（2025-10-30） 下载此版本

fix: 减小包体积

1.0.5（2024-08-06） 下载此版本

修改文档

1.0.4（2024-07-30） 下载此版本

适配r-theme

查看更多

平台兼容性

uni-app(4.54)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× √ √ √ √ √ √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
√ √ √ √ √ √ √ √ √ √ √

r-radio

r-radio单选框，在一组备选项中进行单选。

示例

<r-radio-group v-model:value="radioData">
  <r-radio name="1">单选框 1</r-radio>
  <r-radio name="2">单选框 2</r-radio>
</r-radio-group>

<r-radio-group v-model:value="radioData" direction="horizontal">
  <r-radio name="1">单选框 1</r-radio>
  <r-radio name="2">单选框 2</r-radio>
</r-radio-group>

<r-radio-group v-model:value="radioData" disabled>
  <r-radio name="1">单选框 1</r-radio>
  <r-radio name="2">单选框 2</r-radio>
</r-radio-group>

<r-radio-group v-model:value="radioData" shape="square">
  <r-radio name="1">单选框 1</r-radio>
  <r-radio name="2">单选框 2</r-radio>
</r-radio-group>

<r-radio-group v-model:value="radioData" shape="dot">
  <r-radio name="1">Radio 1</r-radio>
  <r-radio name="2">Radio 2</r-radio>
</r-radio-group>

<r-radio-group v-model:value="radioData">
  <r-radio name="1" checked-color="#ee0a24">单选框 1</r-radio>
  <r-radio name="2" checked-color="#ee0a24">单选框 2</r-radio>
</r-radio-group>

<r-radio-group v-model:value="radioData">
  <r-radio name="1" icon-size="24px">单选框 1</r-radio>
  <r-radio name="2" icon-size="24px">单选框 2</r-radio>
</r-radio-group>

<r-radio-group v-model:value="radioData">
  <r-radio name="1" label-position="left">单选框 1</r-radio>
  <r-radio name="2" label-position="left">单选框 2</r-radio>
</r-radio-group>

<r-radio-group v-model:value="radioData">
  <r-radio name="1" label-disabled>单选框 1</r-radio>
  <r-radio name="2" label-disabled>单选框 2</r-radio>
</r-radio-group>

<r-radio-group v-model:value="radioData">
  <r-radio name="1">
    单选框 1
    <template #icon="props">
      <image
        style="height: 20px; width: 20px"
        :src="
          props.checked
            ? activeURL
            : inactiveURL 
        "
      />
    </template>
  </r-radio>
  <r-radio name="2">
    单选框 2
    <template #icon="props">
      <image
        style="height: 20px; width: 20px"
        :src="
          props.checked
            ? activeURL
            : inactiveURL
        "
      />
    </template>
  </r-radio>
</r-radio-group>

API

Radio Props

名称 说明 类型 默认值 可选值
name 标识符，通常为一个唯一的字符串或数字 any - -
shape 形状 String round square dot
disabled 是否为禁用状态 Boolean false true
labelPosition 文本位置 String right left
iconSize 图标大小 String 40rpx
checkedColor 选中状态颜色 String #1989fa
themeName r-theme 的主题名称 String default

RadioGroup Props

名称 说明 类型 默认值 可选值
value 当前选中项的标识符 any - -
disabled 是否禁用所有单选框 Boolean false true
direction 排列方向 String vertical horizontal
shape 形状 String round square dot
iconSize 所有单选框的图标大小 String 40rpx
checkedColor 所有单选框的选中状态颜色 String #1989fa
themeName r-theme 的主题名称 String default

Radio Slots

名称 说明 参数
default 自定义文本 { checked: boolean, disabled: boolean }
icon 自定义图标 { checked: boolean, disabled: boolean }

Radio Events

名称 说明 回调参数
update:value 当绑定值变化时触发的事件 value
click 点击单选框时触发 e

RadioGroup Events

名称 说明 回调参数
update:value 当绑定值变化时触发的事件 value

更多组件，请前往rainui

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...