更新记录

1.0.6(2024-08-07) 下载此版本

文档更新

1.0.5(2024-08-06) 下载此版本

修改文档

1.0.4(2024-07-30) 下载此版本

适配r-theme

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

r-radio

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

示例

<template>
  <r-config-provider :themeName="themeName">
    <page-header title="单选框"></page-header>
    <view style="padding: 20px">
      <r-divider content-position="left">基础使用</r-divider>
      <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-divider content-position="left">水平排列 </r-divider>
      <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-divider content-position="left">禁用状态 </r-divider>
      <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-divider content-position="left">自定义形状 </r-divider>
      <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-divider content-position="left">自定义形状 </r-divider>
      <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-divider content-position="left">自定义颜色 </r-divider>
      <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-divider content-position="left">基础使用</r-divider>
      <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-divider content-position="left">左侧文本 </r-divider>
      <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-divider content-position="left">禁用文本点击 </r-divider>
      <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-divider content-position="left">自定义图标 </r-divider>
      <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>
    </view>
  </r-config-provider>
</template>

<script setup>
import { ref } from "vue";
import useTheme from "@/hooks/useTheme";
const { themeName } = useTheme();
const radioData = ref("1");
const activeURL = ref(
  "https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"
);
const inactiveURL = ref(
  "https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"
);
</script>

<style></style>

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协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问