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
checked Boolean false 当前是否选中
disabled Boolean false 是否禁用
color Color radio的颜色，同css的color

示例

查看演示
以下示例代码，来自于hello uni-app项目，推荐使用HBuilderX，新建uni-app项目，选择hello uni-app模板，可直接体验完整示例。

  1. <!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
  2. <template>
  3.     <view>
  4.         <view class="uni-padding-wrap">
  5.             <view class="uni-title">默认样式</view>
  6.             <view>
  7.                 <label class="radio"><radio value="r1" checked="true" />选中</label>
  8.                 <label class="radio"><radio value="r2" />未选中</label>
  9.             </view>
  10.         </view>
  11.         <view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
  12.         <view class="uni-list">
  13.             <radio-group @change="radioChange">
  14.                 <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
  15.                     <view>
  16.                         <radio :value="item.value" :checked="index === current" />
  17.                     </view>
  18.                     <view>{{item.name}}</view>
  19.                 </label>
  20.             </radio-group>
  21.         </view>
  22.     </view>
  23. </template>
  1. export default {
  2.     data() {
  3.         return {
  4.             items: [{
  5.                     value: 'USA',
  6.                     name: '美国'
  7.                 },
  8.                 {
  9.                     value: 'CHN',
  10.                     name: '中国',
  11.                     checked: 'true'
  12.                 },
  13.                 {
  14.                     value: 'BRA',
  15.                     name: '巴西'
  16.                 },
  17.                 {
  18.                     value: 'JPN',
  19.                     name: '日本'
  20.                 },
  21.                 {
  22.                     value: 'ENG',
  23.                     name: '英国'
  24.                 },
  25.                 {
  26.                     value: 'FRA',
  27.                     name: '法国'
  28.                 },
  29.             ],
  30.             current: 0
  31.         }
  32.     },
  33.     methods: {
  34.         radioChange: function(evt) {
  35.             for (let i = 0; i < this.items.length; i++) {
  36.                 if (this.items[i].value === evt.target.value) {
  37.                     this.current = i;
  38.                     break;
  39.                 }
  40.             }
  41.         }
  42.     }
  43. }

radio-group 和 radio - 图1
注意

  • radio的默认颜色，在不同平台不一样。微信小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用color属性。
  • 如需调节radio大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"
  • radio不是checkbox，点击一个已经选中的radio，不会将其取消选中