xtf-radio

组件说明

xtf-radio 是单选项组件，可独立使用或由 xtf-radio-group 管理，适用于设置、套餐和支付方式选择。它支持描述、徽标及多个内容插槽。

基础用法

1. 独立单选

<template><xtf-radio v-model="checked" label="接受服务条款" @change="change" /></template>
<script>
export default {
  data() {
    return { checked: false }
  },
  methods: {
    change(value) {
      console.log('选中', value)
    }
  }
}
</script>

2. 配合分组

<template>
  <xtf-radio-group v-model="shipping">
    <xtf-radio name="express" label="极速达" /><xtf-radio name="pickup" label="到店自提"
  /></xtf-radio-group>
</template>
<script>
export default {
  data() {
    return { shipping: 'express' }
  }
}
</script>

3. 内容插槽

<template>
  <xtf-radio-group v-model="plan" variant="card" icon-position="right">
    <xtf-radio name="pro">
      <template #title><xtf-text level="body" bold text="专业版" /></template>
      <template #description><xtf-text level="caption" text="适合团队协作" /></template>
      <template #badge><xtf-tag size="sm" text="推荐" /></template>
      <template #extra><xtf-button size="sm" label="查看权益" @click.stop="show" /></template>
</xtf-radio>
  </xtf-radio-group>
</template>
<script>
export default {
  data() {
    return { plan: 'pro' }
  },
  methods: {
    show() {
      uni.showToast({ title: '查看权益', icon: 'none' })
    }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | name | String \| Number \| Boolean | '' | 分组内唯一值 | 分组选择 | | label/description/badge | String | '' | 标题、说明、徽标 | 文案展示 | | modelValue | Boolean \| String \| Number | undefined | 独立模式受控值 | 独立使用 | | checked | Boolean | false | 独立模式非受控初值 | 展示初态 | | disabled | Boolean | false | 禁用选择 | 不可用项 | | theme/color/activeColor | String | ''/''/'' | 主题或选中颜色 | 颜色定制 | | size | String \| Number | '' | sm/md/lg 或 rpx | 尺寸调整 | | variant | String | '' | default/soft/solid/card/button | 样式变体 | | iconShape | String | '' | circle/square | 图标形状 | | iconPosition | String | '' | left/right | 图标位置 | | align | String | '' | start/center | 内容对齐 | | iconGap/iconSize | String \| Number | '' | 图标间距/尺寸 | 布局微调 | | checkAnimation | String | '' | none/scale/scaleXY/fade/bounce/flip | 选中动效 | | customClass/customStyle | String / String \| Object | ''/'' | 根节点样式定制 | 样式覆盖 |

事件

事件名称	触发时机	回调参数	参数说明
update:modelValue/input/change	独立模式点击且未禁用	(checked: Boolean)	新选中状态；分组模式由 group 发出

---

插槽

插槽名	作用	作用域参数	说明
default	自定义主标题	无	title 插槽未传入时使用，替换 label 文本
title	自定义主标题	无	优先于默认插槽和 label
description	自定义说明	无	替换 description 文本
badge	自定义徽标	无	替换 badge 文本
extra	自定义附加内容	无	显示在标题和说明下方

主题说明

• 选中色使用 --xtf-radio-color，默认映射 var(--xtf-color-primary) 等语义色。
• 边框、背景、文字使用 var(--xtf-color-border)、var(--xtf-color-surface)、var(--xtf-color-text)。
• 尺寸可通过 --xtf-radio-icon-size、--xtf-radio-icon-gap 覆盖。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。