mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
小莫唐尼
173 lines
3.6 KiB
Markdown
173 lines
3.6 KiB
Markdown
# radio 组件示例
|
||
|
||
## 官方文档
|
||
|
||
参考官方文档：https://uniapp.dcloud.net.cn/component/radio.html
|
||
|
||
## 概述
|
||
|
||
`radio` 是单项选择器组件，用于单选场景。
|
||
|
||
## 基础用法
|
||
|
||
```vue
|
||
<template>
|
||
<radio value="option1" checked>选项1</radio>
|
||
</template>
|
||
```
|
||
|
||
## 完整示例
|
||
|
||
### 示例 1: 单个单选框
|
||
|
||
```vue
|
||
<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: 单选框组
|
||
|
||
```vue
|
||
<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: 在表单中使用
|
||
|
||
```vue
|
||
<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
|