Radio 单选组

基于 Element Plus el-radio-group 封装，支持 options 驱动渲染、按钮样式、远程数据源、禁用状态。

基础用法

基础 / 按钮样式 / 禁用状态

基础 options

选项一选项二选项三

值: 1

按钮样式

选项一选项二选项三

值: 1

禁用状态

选项一选项二选项三

值: 2

<template>
  <div class="demo-grid">
    <div class="demo-item">
      <p class="demo-label">基础 options</p>
      <HxRadio
        v-model="value1"
        :options="staticOptions"
      />
      <p class="demo-value">值: {{ value1 }}</p>
    </div>

    <div class="demo-item">
      <p class="demo-label">按钮样式</p>
      <HxRadio
        v-model="value2"
        :options="staticOptions"
        variant="radio-btn"
      />
      <p class="demo-value">值: {{ value2 }}</p>
    </div>

    <div class="demo-item">
      <p class="demo-label">禁用状态</p>
      <HxRadio
        v-model="value3"
        :options="staticOptions"
        disabled
      />
      <p class="demo-value">值: {{ value3 }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { HxRadio } from "@whhx/ui"
import type { OptionItem } from "@whhx/ui"

const value1 = ref("1")
const value2 = ref("1")
const value3 = ref("2")

const staticOptions: OptionItem[] = [
  { label: "选项一", value: "1" },
  { label: "选项二", value: "2", disabled: true },
  { label: "选项三", value: "3" },
]
</script>

远程数据

传入 remote 配置自动请求远端接口获取 options。

静态 / 远程请求 / 按钮样式

<template>
  <ClientOnly>
  <div class="demo-grid">
    <div class="demo-item">
      <p class="demo-label">静态 options</p>
      <HxRadio
        v-model="value1"
        :options="staticOptions"
      />
      <p class="demo-value">值: {{ value1 }}</p>
    </div>

    <div class="demo-item">
      <p class="demo-label">remote 请求</p>
      <HxRadio
        v-model="value2"
        :remote="remoteConfig"
      />
      <p class="demo-value">值: {{ value2 }}</p>
    </div>

    <div class="demo-item">
      <p class="demo-label">remote 按钮样式</p>
      <HxRadio
        v-model="value3"
        :remote="remoteConfig"
        variant="radio-btn"
      />
      <p class="demo-value">值: {{ value3 }}</p>
    </div>
  </div>
  </ClientOnly>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { HxRadio } from "@whhx/ui"
import type { OptionItem, RemoteConfig } from "@whhx/ui"

const value1 = ref("1")
const value2 = ref("")
const value3 = ref("")

const staticOptions: OptionItem[] = [
  { label: "选项一", value: "1" },
  { label: "选项二", value: "2" },
  { label: "选项三", value: "3" },
]

const remoteConfig: RemoteConfig = {
  url: "/api/options/select",
  labelKey: "label",
  valueKey: "value",
}
</script>

API

Props

参数	说明	类型	默认值
v-model	绑定值	string | number	-
options	静态选项列表（优先级高于 remote）	OptionItem[]	-
remote	远程数据获取配置	RemoteConfig	-
variant	显示样式，radio 或 radio-btn	string	radio
disabled	是否禁用	boolean	false

OptionItem

interface OptionItem {
  label: string
  value: string | number
  disabled?: boolean
}