更新记录

1.0.1（2025-08-02） 下载此版本

优化

1.0.0（2025-08-01） 下载此版本

初版

平台兼容性

uni-app

其他

x-radio 组件使用说明

概述

x-radio 一个可自定义的单选框组件，支持自定义样式。

基本用法

<template>
  <!-- vue2 :model-value.sync="isSelected", vue3 v-model="isSelected" -->
  <x-radio v-model="isSelected" @change="handleChange">
  </x-radio>
</template>

<script>
export default {
  data() {
    return {
      isSelected: false
    }
  },
  methods: {
    handleChange(value) {
      console.log('选中状态:', value)
    }
  }
}
</script>

Props 属性

Events 事件

示例

自定义样式

<x-radio 
  v-model="selected"
  :size="50"
  active-color="#ff6b6b"
  inactive-color="#999"
  radius="10rpx"
/>

禁用状态

<x-radio 
  v-model="selected"
  :disabled="true"
/>

自定义样式对象

<x-radio 
  v-model="selected"
  :custom-style="{ boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }"
/>

注意事项

• 组件使用 rpx 单位
• 选中状态显示白色 "√" 图标
• 支持插槽自定义选中状态的显示内容