Radio

单选项目

参考文档

类型

  1. ComponentType<RadioProps>

示例代码

  • React
  • Vue
  1. export default class PageRadio extends Component {
  2.   state = {
  3.     list: [
  4.       {
  5.         value: '美国',
  6.         text: '美国',
  7.         checked: false
  8.       },
  9.       {
  10.         value: '中国',
  11.         text: '中国',
  12.         checked: true
  13.       },
  14.       {
  15.         value: '巴西',
  16.         text: '巴西',
  17.         checked: false
  18.       },
  19.       {
  20.         value: '日本',
  21.         text: '日本',
  22.         checked: false
  23.       },
  24.       {
  25.         value: '英国',
  26.         text: '英国',
  27.         checked: false
  28.       },
  29.       {
  30.         value: '法国',
  31.         text: '法国',
  32.         checked: false
  33.       }
  34.     ]
  35.   }
  36.   render () {
  37.     return (
  38.       <View className='container'>
  39.         <Head title='Radio' />
  40.         <View className='page-body'>
  41.           <View className='page-section'>
  42.             <Text>默认样式</Text>
  43.             <Radio value='选中' checked>选中</Radio>
  44.             <Radio style='margin-left: 20rpx' value='未选中'>未选中</Radio>
  45.           </View>
  46.           <View className='page-section'>
  47.             <Text>推荐展示样式</Text>
  48.             <View className='radio-list'>
  49.               <RadioGroup>
  50.                 {this.state.list.map((item, i) => {
  51.                   return (
  52.                     <Label className='radio-list__label' for={i} key={i}>
  53.                       <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
  54.                     </Label>
  55.                   )
  56.                 })}
  57.               </RadioGroup>
  58.             </View>
  59.           </View>
  60.         </View>
  61.       </View>
  62.     )
  63.   }
  64. }
  1. <template>
  2.   <view class="container">
  3.     <view class="page-section">
  4.       <text>默认样式</text>
  5.       <radio value="选中" :checked="true">选中</radio>
  6.       <radio style="margin-left: 20rpx;" value="未选中">未选中</radio>
  7.     </view>
  8.     <view class="page-section">
  9.       <text>推荐展示样式(Taro 团队成员):</text>
  10.         <radio-group @change="onChange">
  11.           <label v-for="item in list" class="checkbox-list__label">
  12.             <radio class="checkbox-list__checkbox" :value="item.value" :checked="item.checked">{{ item.text }}</radio>
  13.           </label>
  14.         </radio-group>
  15.     </view>
  16.   </view>
  17. </template>
  20. <script>
  21. export default {
  22.   data() {
  23.     return {
  24.       list: [
  25.         {
  26.           value: 'yuche',
  27.           text: 'yuche',
  28.           checked: false
  29.         },
  30.         {
  31.           value: 'cjj',
  32.           text: 'cjj',
  33.           checked: false
  34.         },
  35.         {
  36.           value: 'xiexiaoli',
  37.           text: 'xiexiaoli',
  38.           checked: false
  39.         },
  40.         {
  41.           value: 'honly',
  42.           text: 'honly',
  43.           checked: false
  44.         },
  45.         {
  46.           value: 'cs',
  47.           text: 'cs',
  48.           checked: false
  49.         },
  50.         {
  51.           value: 'zhutianjian',
  52.           text: 'zhutianjian',
  53.           checked: false
  54.         },
  55.         {
  56.           value: '隔壁老李',
  57.           text: '隔壁老李',
  58.           checked: true
  59.         }
  60.       ]
  61.     }
  62.   },
  63.   methods: {
  64.     onChange: function(e) {
  65.       console.log(e.detail.value)
  66.     }
  67.   }
  68. }
  69. </script>

RadioProps

参数类型默认值必填说明
valuestring否<Radio/> 标识。当该<Radio/> 选中时，<RadioGroup/>的 change 事件会携带<Radio/>的 value
checkedbooleanfalse否当前是否选中
disabledbooleanfalse否是否禁用
colorstring“#09BB07”否Radio 的颜色，同 css 的 color

API 支持度

API微信小程序H5React Native
RadioProps.value✔️✔️
RadioProps.checked✔️✔️✔️
RadioProps.disabled✔️✔️✔️
RadioProps.color✔️✔️

API 支持度

API微信小程序H5React Native
Radio✔️✔️✔️