PIUI 高质量开源组件库

# Radio 单选框

表单组件-单选框,用于在多个选项中选择单个结果

提示

必须搭配 radio-group一起使用

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
√ √ √ √ √ √ √

# 示例

# 基础用法

结合pi-radio-group元素和子元素pi-radio可以实现单选组，在pi-radio-group中绑定v-model，在el-radio中设置好name即可，无需再给每一个pi-radio绑定变量，另外，还提供了change事件来响应变化，它会传入一个参数value，即pi-radio的name属性值。

<pi-radio-group v-model="radio">
  <pi-radio name="a">备选项a</pi-radio>
  <pi-radio name="b">备选项b</pi-radio>
  <pi-radio name="c">备选项c</pi-radio>
</pi-radio-group>
1
2
3
4
5

# 禁用状态

单选框不可用的状态。可设置 disabled 禁用单选框组。

注意

disabled 只是禁止用户选择，仍然可以通过value设置选中某一个。

<template>
  <pi-radio-group  v-model="demo5.disabled" direction="vertical" disabled>
    <pi-radio :name="1" active-color="red">红色，代表热情</pi-radio>
    <pi-radio :name="2" active-color="blue">蓝色，代表冷静</pi-radio>
    <pi-radio :name="3" active-color="green">绿色，代表生活</pi-radio>
  </pi-radio-group>
</template>
1
2
3
4
5
6
7

# 纵向排列

可以通过direction设置选项排列方向。

  1. horizontal : 水平（默认）
  2. vertical : 垂直
<template>
  <pi-radio-group direction="vertical">
    <pi-radio name="a">备选项a</pi-radio>
    <pi-radio name="b">备选项b</pi-radio>
    <pi-radio name="c">备选项c</pi-radio>
  </pi-radio-group>
</template>
1
2
3
4
5
6
7

# 不同形状

可自定义单选框的形状，设置 shape 属性指定形状，有以下形状可供选择：

  1. square : 方形（默认）
  2. round : 圆形
  3. dot : 圆点
  4. text : 文字
<template>
  <pi-radio-group v-model="demo1" direction="vertical">
    <pi-radio name="square" shape="square">方形（默认）</pi-radio>
    <pi-radio name="round" shape="round">圆形</pi-radio>
    <pi-radio name="dot" shape="dot">圆点</pi-radio>
    <pi-radio name="text" shape="text">文字</pi-radio>
  </pi-radio-group>
</template>
1
2
3
4
5
6
7
8

# 按钮样式

可通过 shape：button 设置按钮样式的选项

提示

  1. 该模式下，只支持水平方向布局
  2. 如果需要均分父组件宽度，可使用stretch属性
  3. 支持两种填充模式：line 和 fill
<template>
  <pi-radio-group v-model="buttonShape" shape="button">
    <pi-radio :name="1">选项1</pi-radio>
    <pi-radio :name="2">选项2</pi-radio>
    <pi-radio :name="3">选项3</pi-radio>
    <pi-radio :name="4">选项4</pi-radio>
  </pi-radio-group>
  <pi-radio-group
    v-model="buttonShape"
    shape="button"
    stretch
    active-mode="fill"
    custom-class="pi-mg-top-24"
  >
    <pi-radio :name="1">备选项1</pi-radio>
    <pi-radio :name="2">备选项2</pi-radio>
    <pi-radio :name="3">备选项3</pi-radio>
    <pi-radio :name="4">stretch较长的选项</pi-radio>
  </pi-radio-group>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 激活模式

设置active-mode属性可以改变单选框被选中时的样式。

  1. line : 线框（默认）
  2. line-circle: 线环：中间打钩和圆点不显示
  3. fill : 填充
  4. fill-circle: 填充环：中间打钩和圆点不显示
<template>
  <pi-radio-group v-model="demo2" active-mode="line">
    线框：
    <pi-radio name="square" shape="square">方形</pi-radio>
    <pi-radio name="round" shape="round">圆形</pi-radio>
    <pi-radio name="dot" shape="dot">圆点</pi-radio>
    <pi-radio name="text" shape="text">文字</pi-radio>
  </pi-radio-group>
  <pi-radio-group v-model="demo2" active-mode="line-circle" custom-class="pi-mg-top-24">
    线环：
    <pi-radio name="square" shape="square">方形</pi-radio>
    <pi-radio name="round" shape="round">圆形</pi-radio>
    <pi-radio name="dot" shape="dot">圆点</pi-radio>
    <pi-radio name="text" shape="text">文字</pi-radio>
  </pi-radio-group>
  <pi-radio-group v-model="demo2" active-mode="fill" custom-class="pi-mg-top-24">
    填充：
    <pi-radio name="square" shape="square">方形</pi-radio>
    <pi-radio name="round" shape="round">圆形</pi-radio>
    <pi-radio name="dot" shape="dot">圆点</pi-radio>
    <pi-radio name="text" shape="text">文字</pi-radio>
  </pi-radio-group>
  <pi-radio-group v-model="demo2" active-mode="fill-circle" custom-class="pi-mg-top-24">
    填充环：
    <pi-radio name="square" shape="square">方形</pi-radio>
    <pi-radio name="round" shape="round">圆形</pi-radio>
    <pi-radio name="dot" shape="dot">圆点</pi-radio>
    <pi-radio name="text" shape="text">文字</pi-radio>
  </pi-radio-group>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 单选框颜色

单选框组标签中设置 active-color 属性，组内选框将显示为当前设置的颜色

注：在单选框组内单独设置其他颜色不生效

<pi-radio-group v-model="demo3" direction="vertical" active-color="#ff508a">
  <pi-radio :name="1" active-mode="fill">红色，代表热情</pi-radio>
  <pi-radio :name="2">蓝色，代表冷静</pi-radio>
  <pi-radio :name="3" disabled>绿色，代表生活</pi-radio>
</pi-radio-group>
1
2
3
4
5

# 设置尺寸

size 设置单选框的文字大小

icon-size 设置单选框的图标大小

<pi-radio-group v-model="demo6" direction="vertical" size="60" icon-size="40">
  <pi-radio :name="1" active-mode="fill" active-color="red">红色，代表热情</pi-radio>
  <pi-radio :name="2" active-color="blue">蓝色，代表冷静</pi-radio>
  <pi-radio :name="3" disabled active-color="green">绿色，代表生活</pi-radio>
</pi-radio-group>
1
2
3
4
5

# API

# RadioGroup Props

名称 描述 类型 必选 默认值
v-model(value) 初始值 — false -
customStyle 自定义样式，对象形式 Object false -
customClass 自定义样式类 String false -
max 最大可选数，0为无限制 String | Number false 0
direction 排列方向 '', 'horizontal', 'vertical' false 'horizontal'
shape 形状 'round', 'square', 'dot', 'text' false -
border 边框大小，单位rpx String | Number false 0
disabled 是否禁用单选框 Boolean false false
size radio大小，单位rpx String | Number false 0
iconSize radio icon 大小，单位rpx String | Number false 0
activeColor 选中时图标的颜色 String false -
activeMode 激活模式 line, line-circle - 线环 fill false 'line'

# RadioGroup Slots

名称 描述 插槽内容
default - -

# RadioGroup Events

Method 描述 参数
change 用于给子子组件pi-radio调用，从而更新value pi-radio的name属性值

# Radio Props

注意

CheckboxGroup与Checkbox同名的属性，相当于整体设置，会覆盖Checkbox的属性

名称 描述 类型 必选 默认值
customStyle 自定义样式，对象形式 Object false -
customClass 自定义样式类，字符串形式 String false -
name radio组件的标示符 String | Number false -
shape 形状 'square', 'round', 'dot', 'text' false 'round'
stretch 当shape为button的时候，选项否均分布局 Boolean false false
borderRadius 当shape为square的时候，设置圆角，值为数字时，单位默认rpx String | Number false 8
border 边框大小，传数字时，单位默认rpx String | Number false 4
disabled 是否禁用单选框 Boolean false false
readonly 是否只读模式 Boolean false false
size radio大小，数字时，单位默认rpx String | Number false 40
iconSize radio icon 大小，数字时，单位默认rpx String | Number false 24
activeColor 选中时图标的颜色 String false -
activeMode 激活模式 'line'-线框模式 line-circle - 线环 'fill'-实底 'fill-circle 填充环' false line

# Radio Slots

名称 描述 插槽内容
default - -
Last updated: 2022/4/2 下午3:10:35

← Checkbox 复选框 →

10:44