xtf-radio-group

组件说明

xtf-radio-group 用于管理一组选项的唯一选中值，适用于表单、配送和筛选场景。可直接传 options，也可嵌套 xtf-radio 获得完整内容能力。

基础用法

1. options 数据源

<template><xtf-radio-group v-model="value" :options="options" @change="change" /></template>
<script>
export default {
  data() {
    return {
      value: 'a',
      options: [
        { label: '普通配送', value: 'a' },
        { label: '极速配送', value: 'b' }
      ]
    }
  },
  methods: {
    change(value) {
      console.log(value)
    }
  }
}
</script>

2. 横向按钮

<template>
  <xtf-radio-group v-model="period" direction="row" variant="button" color="#2563eb">
    <xtf-radio name="day" label="日配" /><xtf-radio name="week" label="周配"
  /></xtf-radio-group>
</template>
<script>
export default {
  data() {
    return { period: 'day' }
  }
}
</script>

3. 自定义字段与禁用项

<template>
  <xtf-radio-group
    v-model="channel"
    :options="channels"
    option-label-key="text"
    option-value-key="id"
    option-disabled-key="locked"
    size="lg"
  />
</template>
<script>
export default {
  data() {
    return {
      channel: 1,
      channels: [
        { id: 1, text: '微信' },
        { id: 2, text: '银行卡', locked: true }
      ]
    }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | value/modelValue | String \| Number \| Boolean | ''/undefined | 当前值，后者优先 | v-model | | name | String | '' | 表单字段名 | 表单集成 | | options | Array | [] | 自动渲染选项 | 简单选项 | | optionLabelKey/optionValueKey/optionDisabledKey | String | 'label'/'value'/'disabled' | options 字段映射 | 后端数据 | | disabled | Boolean | false | 禁用整个分组 | 不可编辑 | | theme | String | 'primary' | 传递给子 radio 的主题 | 主题选择 | | color/activeColor | String | ''/'' | 选中颜色 | 颜色定制 | | variant | String | 'default' | 子 radio 变体 | 风格切换 | | iconShape/iconPosition/align | String | 'circle'/'left'/'center' | 子项图标及对齐 | 子项布局 | | iconGap/iconSize | String \| Number | '' | 子项图标参数 | 子项布局 | | checkAnimation | String | 'scaleXY' | 子项选中动效 | 动效定制 | | size | String \| Number | 'md' | 子项尺寸 | 尺寸调整 | | direction | String | 'column' | column/row 排列 | 列表或按钮组 | | gap | String \| Number | 20 | 子项间距 | 布局调整 | | customClass/customStyle | String / String \| Object | ''/'' | 根节点样式定制 | 样式覆盖 |

options 每项支持的字段

字段	类型	默认值	说明
映射后的标签字段	String	''	由 optionLabelKey 读取
映射后的值字段	String | Number | Boolean	index	由 optionValueKey 读取
映射后的禁用字段	Boolean	false	由 optionDisabledKey 读取

---

事件

事件名称	触发时机	回调参数	参数说明
update:modelValue/input/change	点击可用选项	(value: String | Number | Boolean)	新选中值

---

插槽

插槽名	作用	作用域参数	说明
default	自定义选项内容	无	提供后优先于 options 自动渲染，通常放置 xtf-radio

完整插槽示例：

<template>
  <xtf-radio-group v-model="shipping" direction="row">
    <xtf-radio name="express">
      <template #title><xtf-text level="body" bold text="极速配送" /></template>
      <template #description><xtf-text level="caption" text="预计今天送达" /></template>
</xtf-radio>
    <xtf-radio name="pickup" label="到店自提"
  /></xtf-radio-group>
</template>
<script>
export default {
  data() {
    return { shipping: 'express' }
  }
}
</script>

主题说明

• 间距由 --xtf-radio-group-gap 控制。
• 自动渲染模式使用 var(--xtf-color-border)、var(--xtf-color-primary)、var(--xtf-color-text)。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。