FxRadio 单选框 / FxRadioGroup / FxRadioBtn

不依赖任何 UI 框架。

基础用法

<template>
  <FxRadio v-model="value" value="a">选项 A</FxRadio>
  <FxRadio v-model="value" value="b">选项 B</FxRadio>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("a")
</script>

单选框组

<template>
  <FxRadioGroup v-model="value">
    <FxRadio value="a">备选项 A</FxRadio>
    <FxRadio value="b">备选项 B</FxRadio>
    <FxRadio value="c">备选项 C</FxRadio>
  </FxRadioGroup>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("a")
</script>

禁用（disabled）

<template>
  <FxRadio v-model="value" disabled value="a">禁用选项 A</FxRadio>
  <FxRadio v-model="value" disabled value="b">禁用选项 B</FxRadio>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("a")
</script>

disabled 属性禁用单选框。

按钮样式

<template>
  <div class="flex flex-col gap-4">
    <FxRadioGroup v-model="value">
      <FxRadioBtn value="a">北京</FxRadioBtn>
      <FxRadioBtn value="b">上海</FxRadioBtn>
      <FxRadioBtn value="c">广州</FxRadioBtn>
      <FxRadioBtn value="d">深圳</FxRadioBtn>
    </FxRadioGroup>
    <FxRadioGroup v-model="value2" fill="#6BA3BE" text-color="#fff">
      <FxRadioBtn value="a">北京</FxRadioBtn>
      <FxRadioBtn value="b">上海</FxRadioBtn>
      <FxRadioBtn value="c">广州</FxRadioBtn>
    </FxRadioGroup>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("a")
const value2 = ref("a")
</script>

fill / text-color 自定义激活色。

v-for 渲染选项

<template>
  <FxRadioGroup v-model="value">
    <FxRadio v-for="item in options" :key="item.value" :value="item.value">
      {{ item.label }}
    </FxRadio>
  </FxRadioGroup>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("a")
const options = [
  { value: "a", label: "选项 A" },
  { value: "b", label: "选项 B" },
  { value: "c", label: "选项 C" },
]
</script>

数据驱动（options）

传入 options 与 option-props 即可自动渲染，type="button" 切换按钮形态。options 数组项除 label / value / disabled（字段名可由 option-props 重命名）外的其余字段会透传给子 FxRadio / FxRadioBtn，可作为额外属性（如 id、data-*）下发。

<template>
  <div class="flex flex-col gap-4">
    <FxRadioGroup v-model="value" :options="options" />
    <FxRadioGroup v-model="value2" :options="options" type="button" />
    <FxRadioGroup
      v-model="value3"
      :options="customOptions"
      :option-props="{ label: 'name', value: 'id', disabled: 'unavailable' }"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("a")
const value2 = ref("b")
const value3 = ref(1)
const options = [
  { value: "a", label: "选项 A" },
  { value: "b", label: "选项 B" },
  { value: "c", label: "选项 C" },
]
const customOptions = [
  { id: 1, name: "北京", unavailable: false },
  { id: 2, name: "上海", unavailable: false },
  { id: 3, name: "广州", unavailable: true },
]
</script>

边框（border）

<template>
  <div class="flex flex-wrap items-center gap-4">
    <FxRadio v-model="value" value="a" border>选项 A</FxRadio>
    <FxRadio v-model="value" value="b" border>选项 B</FxRadio>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("a")
</script>

尺寸（size）

<template>
  <div class="flex flex-col gap-4">
    <FxRadioGroup v-model="value" size="large">
      <FxRadio value="a" border>大</FxRadio>
      <FxRadio value="b" border>大</FxRadio>
    </FxRadioGroup>
    <FxRadioGroup v-model="value">
      <FxRadio value="a" border>默认</FxRadio>
      <FxRadio value="b" border>默认</FxRadio>
    </FxRadioGroup>
    <FxRadioGroup v-model="value" size="small">
      <FxRadio value="a" border>小</FxRadio>
      <FxRadio value="b" border>小</FxRadio>
    </FxRadioGroup>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("a")
</script>

FxRadio Props

属性	类型	默认值	说明
model-value (v-model)	string | number | boolean	—	绑定值
value	string | number | boolean	—	radio 的值
label	string | number | boolean	—	标签（value 缺省时兼作值）
size	'large' | 'default' | 'small'	'default'	尺寸
disabled	boolean	false	是否禁用
border	boolean	false	是否显示边框
name	string	—	原生 name
aria-label	string	—	aria-label

FxRadio Events

事件名	说明
update:modelValue	值变化
change	变化时

FxRadio Slots

插槽名	说明
default	标签内容

FxRadioGroup Props

属性	类型	默认值	说明
model-value (v-model)	string | number | boolean	—	绑定值
size	'large' | 'default' | 'small'	—	尺寸
disabled	boolean	false	禁用
fill	string	''	按钮激活填充色（仅 button 模式）
text-color	string	''	按钮激活文字色（仅 button 模式）
name	string	—	原生 name
aria-label	string	—	aria-label
validate-event	boolean	true	值变化时是否触发表单项校验
options	Array<Record<string, any>>	—	选项数据，传入后无需手写子组件
option-props	{ label?, value?, disabled? }	—	options 的字段别名配置
type	'radio' | 'button'	'radio'	形态：普通单选 / 按钮形态

FxRadioBtn Props

同 FxRadio（无 border）。