uni-halo/.agents/skills/uniapp-project/examples/components/built-in/radio.md

radio 组件示例

官方文档

参考官方文档：https://uniapp.dcloud.net.cn/component/radio.html

概述

radio 是单项选择器组件，用于单选场景。

基础用法

<template>
  <radio value="option1" checked>选项1</radio>
</template>

完整示例

示例 1: 单个单选框

<template>
  <view class="container">
    <radio value="male" :checked="gender === 'male'" @tap="handleChange">
      男
    </radio>
    <radio value="female" :checked="gender === 'female'" @tap="handleChange">
      女
    </radio>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gender: 'male'
    }
  },
  methods: {
    handleChange(e) {
      this.gender = e.detail.value
      console.log('选择的性别', this.gender)
    }
  }
}
</script>

示例 2: 单选框组

<template>
  <view class="container">
    <radio-group @change="handleGroupChange">
      <label v-for="item in options" :key="item.value" class="radio-item">
        <radio :value="item.value" :checked="selectedValue === item.value" />
        <text>{{ item.label }}</text>
      </label>
    </radio-group>
    <text>已选择：{{ selectedValue }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ],
      selectedValue: 'option1'
    }
  },
  methods: {
    handleGroupChange(e) {
      this.selectedValue = e.detail.value
      console.log('选中的值', this.selectedValue)
    }
  }
}
</script>

<style>
.radio-item {
  display: flex;
  align-items: center;
  padding: 10px;
}
</style>

示例 3: 在表单中使用

<template>
  <form @submit="handleSubmit">
    <view class="form-item">
      <text>支付方式：</text>
      <radio-group name="payment" @change="handlePaymentChange">
        <label v-for="method in paymentMethods" :key="method.value" class="radio-item">
          <radio :value="method.value" />
          <text>{{ method.label }}</text>
        </label>
      </radio-group>
    </view>
    <button form-type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      paymentMethods: [
        { value: 'alipay', label: '支付宝' },
        { value: 'wechat', label: '微信支付' },
        { value: 'bank', label: '银行卡' }
      ],
      selectedPayment: ''
    }
  },
  methods: {
    handlePaymentChange(e) {
      this.selectedPayment = e.detail.value
    },
    handleSubmit(e) {
      console.log('选择的支付方式', this.selectedPayment)
    }
  }
}
</script>

属性说明

属性名	类型	默认值	说明
value	String	-	radio 标识，选中时触发 change 事件，并携带 value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用
color	String	#007aff	radio 的颜色

平台兼容性

平台	支持情况
H5	✅
微信小程序	✅
支付宝小程序	✅
百度小程序	✅
字节跳动小程序	✅
QQ 小程序	✅
快手小程序	✅
App	✅
快应用	✅

注意事项

1. 需要配合 radio-group 使用才能获取选中的值
2. 同一组内只能选择一个选项
3. value 用于标识不同的选项
4. checked 属性控制选中状态

参考资源

• 官方文档: https://uniapp.dcloud.net.cn/component/radio.html
• 表单组件: https://uniapp.dcloud.net.cn/component/form.html