Checkbox 多选组

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

基础用法

基础 / 禁用状态

基础 options

唱歌跳舞编程写作

值: ["sing","code"]

禁用状态

唱歌跳舞编程写作

值: ["sing"]

<template>
  <div class="demo-grid">
    <div class="demo-item">
      <p class="demo-label">基础 options</p>
      <HxCheckbox
        v-model="value1"
        :options="staticOptions"
      />
      <p class="demo-value">值: {{ JSON.stringify(value1) }}</p>
    </div>

    <div class="demo-item">
      <p class="demo-label">禁用状态</p>
      <HxCheckbox
        v-model="value2"
        :options="staticOptions"
        disabled
      />
      <p class="demo-value">值: {{ JSON.stringify(value2) }}</p>
    </div>
  </div>
</template>

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

const value1 = ref<string[]>(["sing", "code"])
const value2 = ref<string[]>(["sing"])

const staticOptions: OptionItem[] = [
  { label: "唱歌", value: "sing" },
  { label: "跳舞", value: "dance", disabled: true },
  { label: "编程", value: "code" },
  { label: "写作", value: "write" },
]
</script>

远程数据

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

静态 / 远程请求

<template>
  <ClientOnly>
  <div class="demo-grid">
    <div class="demo-item">
      <p class="demo-label">静态 options</p>
      <HxCheckbox
        v-model="value1"
        :options="staticOptions"
      />
      <p class="demo-value">值: {{ JSON.stringify(value1) }}</p>
    </div>

    <div class="demo-item">
      <p class="demo-label">remote 请求</p>
      <HxCheckbox
        v-model="value2"
        :remote="remoteConfig"
      />
      <p class="demo-value">值: {{ JSON.stringify(value2) }}</p>
    </div>
  </div>
  </ClientOnly>
</template>

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

const value1 = ref<string[]>(["code"])
const value2 = ref<string[]>([])

const staticOptions: OptionItem[] = [
  { label: "唱歌", value: "sing" },
  { label: "跳舞", value: "dance" },
  { label: "编程", value: "code" },
]

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

API

Props

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

OptionItem

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