• radio-group
  • radio

    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 上编辑此页面！