# radio

单选框

# 使用示例

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-title">radio 单项选择器</view>
    <demo-cell title="默认样式">
			<label class="mr-10"><radio value="r1" checked="true" />选中</label>
			<label class="mr-10"><radio value="r2" />未选中</label>
    </demo-cell>
    <demo-cell title="不同颜色和尺寸">
      <radio-group>
        <label class="mr-10">
          <radio value="cb" checked="true" color="#FFCC33" style="transform:scale(0.7)" />选中
        </label>
        <label class="mr-10">
          <radio value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
        </label>
        <label class="mr-10">
          <radio value="cb" disabled color="#FFCC33" style="transform:scale(0.7)" />禁用
        </label>
        <label class="mr-10">
          <radio value="cb" style="transform:scale(0.7)" />
        </label>
      </radio-group>
    </demo-cell>
  </view>
</template>

<script>
	export default {
	}
</script>

<style>

</style>

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
31
32
33
34

展开刷新关闭

# radio-group

单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。

属性说明

属性名	类型	默认值	说明
@change	EventHandle		`<radio-group>` 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}

# radio

单选项目。

属性说明

属性名	类型	默认值	说明
value	String		`<radio>` 标识。当该 `<radio>` 选中时，`<radio-group>` 的 change 事件会携带 `<radio>` 的 value（v-model）
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用
color	Color		radio的颜色，同css的color

注意：

radio 的默认颜色，是蓝色的。更改颜色使用 color 属性。
如需调节 radio 大小，可通过 css 的 scale 方法调节，如缩小到 70% 则style="transform:scale(0.7)"
radio 不是 checkbox，点击一个已经选中的 radio，不会将其取消选中

← checkbox switch →