radio-group

单项选择器，内部由多个 <radio> 组成。

属性说明

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

radio

单选项目。

属性说明

属性名类型默认值说明
valueString<radio> 标识。当该 <radio> 选中时，<radio-group> 的 change 事件会携带 <radio> 的 value
checkedBooleanfalse当前是否选中
disabledBooleanfalse是否禁用
colorColorradio的颜色，同css的color

示例

  1. <template>
  2.     <view>
  3.         <view class="uni-padding-wrap">
  4.             <view class="uni-title">默认样式</view>
  5.             <view>
  6.                 <label class="radio"><radio value="r1" checked="true" />选中</label>
  7.                 <label class="radio"><radio value="r2" />未选中</label>
  8.             </view>
  9.         </view>
  10.         <view class="uni-title uni-common-mt uni-common-pl">推荐展示样式</view>
  11.         <view class="uni-list">
  12.             <radio-group @change="radioChange">
  13.                 <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
  14.                     <view>
  15.                         <radio :value="item.value" :checked="index === current" />
  16.                     </view>
  17.                     <view>{{item.name}}</view>
  18.                 </label>
  19.             </radio-group>
  20.         </view>
  21.     </view>
  22. </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. }

uniapp

示例代码说明：以上示例代码从hello uni-app示例中复制，涉及的css样式在hello uni-app的app.vue和uni.css中

预览H5效果：使用浏览器的手机模式访问https://uniapp.dcloud.io/h5/pages/component/radio/radio

注意

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

发现错误？想参与编辑？在 GitHub 上编辑此页面！