@tanzhenxing/zx-radio NPM

zx-radio 单选框组件

符合 uni-app 官方标准的单选框组件，支持单独使用或配合 zx-radio-group 使用。

特性

✅ 符合 uni-app 官方 radio 组件 API 标准
✅ 支持单独使用和 radio-group 组合使用
✅ 支持自定义颜色、大小、样式
✅ 支持禁用状态
✅ 标准的圆形 radio 样式
✅ 良好的无障碍访问支持
✅ TypeScript 类型支持

基本用法

单独使用

<template>
  <view>
    <!-- 基础用法 -->
    <zx-radio v-model:checked="checked1" value="option1">
      选项1
    </zx-radio>
    
    <!-- 设置初始选中状态 -->
    <zx-radio :checked="true" value="option2">
      默认选中
    </zx-radio>
    
    <!-- 禁用状态 -->
    <zx-radio :disabled="true" value="option3">
      禁用选项
    </zx-radio>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const checked1 = ref(false)
</script>

配合 radio-group 使用（推荐）

<template>
  <view>
    <zx-radio-group v-model="radioValue" @change="handleChange">
      <zx-radio value="1">选项1</zx-radio>
      <zx-radio value="2">选项2</zx-radio>
      <zx-radio value="3">选项3</zx-radio>
    </zx-radio-group>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const radioValue = ref('1')

const handleChange = (e) => {
  console.log('选中值:', e.value)
}
</script>

自定义样式

<template>
  <view>
    <zx-radio-group v-model="radioValue">
      <!-- 自定义颜色 -->
      <zx-radio 
        value="1" 
        color="#ff4757"
        active-background-color="#ff4757"
        active-border-color="#ff4757"
      >
        红色主题
      </zx-radio>
      
      <!-- 自定义大小 -->
      <zx-radio 
        value="2"
        :size="24"
        color="#2ed573"
      >
        大号尺寸
      </zx-radio>
      
      <!-- 自定义边框和背景 -->
      <zx-radio 
        value="3"
        background-color="#f1f2f6"
        border-color="#57606f"
        icon-color="#2f3542"
      >
        自定义样式
      </zx-radio>
    </zx-radio-group>
  </view>
</template>

水平布局

<template>
  <view>
    <zx-radio-group v-model="radioValue" placement="row">
      <zx-radio value="1">选项1</zx-radio>
      <zx-radio value="2">选项2</zx-radio>
      <zx-radio value="3">选项3</zx-radio>
    </zx-radio-group>
  </view>
</template>

API

zx-radio Props

属性名	类型	默认值	说明
value	String / Number / Boolean	''	radio 标识，当 radio 选中时，radio-group 的 change 事件会携带 radio 的 value
checked	Boolean	false	当前是否选中
disabled	Boolean	false	是否禁用
color	String	'#007AFF'	radio 的颜色，同 css 的 color
backgroundColor	String	'#ffffff'	radio 默认的背景颜色
borderColor	String	'#d1d1d1'	radio 默认的边框颜色
activeBackgroundColor	String	''	radio 选中时的背景颜色，优先级大于 color 属性
activeBorderColor	String	''	radio 选中时的边框颜色
iconColor	String	'#ffffff'	radio 的图标颜色
size	String / Number	20	组件大小，单位 px
name	String	''	组件名称，用于表单验证

zx-radio Events

事件名	说明	回调参数
change	选中状态改变时触发（仅在单独使用时）	{ value: 当前值, checked: 是否选中 }

zx-radio-group Props

属性名	类型	默认值	说明
modelValue	String / Number / Boolean	''	绑定的值
disabled	Boolean	false	是否禁用所有 radio
name	String	''	标识符，用于表单验证
placement	String	'column'	布局方式，'row'-横向，'column'-纵向
customStyle	Object	{}	组件的样式，对象形式
validateEvent	Boolean	true	输入时是否触发表单验证
ariaLabel	String	''	无障碍访问标签