更新记录
1.0.0(2026-02-02)
下载此版本
- 圆形单选框样式
- 支持标题和辅助文本
- 支持禁用状态
- 精确匹配选中状态
平台兼容性
uni-app(5.0)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| - |
√ |
√ |
- |
√ |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| - |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(5.0)
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
| - |
- |
- |
- |
- |
- |
Check-Single 单选框
单选框组件,用于从多个选项中选择一个。
功能特性
- 圆形单选框样式
- 支持标题和辅助文本
- 支持禁用状态
- 精确匹配选中状态
Props
| 属性名 |
类型 |
默认值 |
说明 |
| modelValue |
String/Number/Boolean |
null |
当前选中的值 |
| value |
String/Number/Boolean |
- |
当前选项的值 |
| title |
String |
- |
标题文本 |
| text |
String |
- |
辅助文本 |
| disabled |
Boolean |
false |
是否禁用 |
Events
| 事件名 |
参数 |
说明 |
| update:modelValue |
- |
值变化时触发 |
使用示例
<template>
<Check-Single
v-model="selectedOption"
:value="option1"
title="选项一"
/>
<Check-Single
v-model="selectedOption"
:value="option2"
title="选项二"
/>
</template>
<script setup>
import { ref } from 'vue';
import CheckSingle from '@/components/Check-Single.vue';
const selectedOption = ref('option1');
const option1 = 'option1';
const option2 = 'option2';
</script>