FxCheckbox 多选框 / FxCheckboxGroup / FxCheckboxBtn

不依赖任何 UI 框架。

基础用法

<template>
  <FxCheckbox v-model="checked">选项</FxCheckbox>
</template>

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

多选框组

<template>
  <FxCheckboxGroup v-model="checked">
    <FxCheckbox value="a">选项 A</FxCheckbox>
    <FxCheckbox value="b">选项 B</FxCheckbox>
    <FxCheckbox value="c">选项 C</FxCheckbox>
  </FxCheckboxGroup>
</template>

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

禁用（disabled）

<template>
  <FxCheckbox v-model="a" disabled>禁用（选中）</FxCheckbox>
  <FxCheckbox v-model="b" disabled>禁用（未选）</FxCheckbox>
</template>

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

按钮样式

<template>
  <div class="flex flex-col gap-4">
    <FxCheckboxGroup v-model="checked">
      <FxCheckboxBtn value="a">北京</FxCheckboxBtn>
      <FxCheckboxBtn value="b">上海</FxCheckboxBtn>
      <FxCheckboxBtn value="c">广州</FxCheckboxBtn>
    </FxCheckboxGroup>
    <FxCheckboxGroup v-model="checked2" fill="#6BA3BE" text-color="#fff">
      <FxCheckboxBtn value="a">北京</FxCheckboxBtn>
      <FxCheckboxBtn value="b">上海</FxCheckboxBtn>
    </FxCheckboxGroup>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const checked = ref(["a"])
const checked2 = ref(["a"])
</script>

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

边框（border）

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

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

尺寸（size）

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

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

半选（indeterminate）

<template>
  <div class="flex flex-col gap-4">
    <FxCheckbox v-model="checkAll" :indeterminate="indeterminate"
      >全选（半选状态）</FxCheckbox
    >
    <FxCheckboxGroup v-model="checked">
      <FxCheckbox value="a">选项 A</FxCheckbox>
      <FxCheckbox value="b">选项 B</FxCheckbox>
      <FxCheckbox value="c">选项 C</FxCheckbox>
    </FxCheckboxGroup>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue"

const all = ["a", "b", "c"]
const checked = ref<string[]>([])

// 全选 checkbox 的 model 是 boolean，用 writable computed 转换
const checkAll = computed<boolean>({
  get: () => checked.value.length === all.length,
  set: (val) => {
    checked.value = val ? [...all] : []
  },
})

const indeterminate = computed(
  () => checked.value.length > 0 && checked.value.length < all.length,
)
</script>

数量限制（min / max）

<template>
  <FxCheckboxGroup v-model="checked" :min="1" :max="2">
    <FxCheckbox value="a">选项 A</FxCheckbox>
    <FxCheckbox value="b">选项 B</FxCheckbox>
    <FxCheckbox value="c">选项 C</FxCheckbox>
    <FxCheckbox value="d">选项 D</FxCheckbox>
  </FxCheckboxGroup>
  <p style="margin-top: 12px; color: var(--fx-text-color-secondary); font-size: 12px">
    最少选 1 项，最多选 2 项
  </p>
</template>

<script setup lang="ts">
import { ref } from "vue"
const checked = ref<string[]>(["a"])
</script>

min / max 限制可勾选数量。

v-for 渲染选项

<template>
  <FxCheckboxGroup v-model="checked">
    <FxCheckbox
      v-for="item in options"
      :key="item.value"
      :value="item.value"
      :disabled="item.disabled"
    >
      {{ item.label }}
    </FxCheckbox>
  </FxCheckboxGroup>
</template>

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

数据驱动（options）

传入 options 与 option-props 即可自动渲染，type="button" 切换按钮形态，无需手写子组件。

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

<script setup lang="ts">
import { ref } from "vue"
const checked = ref(["a"])
const checked2 = ref(["b"])
const checked3 = 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>

FxCheckbox Props

属性	类型	默认值	说明
model-value (v-model)	string | number | boolean	—	绑定值
label	string | number | boolean	—	标签（仅展示文本）
value	string | number | boolean	—	checkbox 值（group 内）
indeterminate	boolean	false	半选（仅样式）
disabled	boolean	false	禁用
checked	boolean	false	初始选中
name	string	—	原生 name
true-value	string | number | boolean	—	选中时的值
false-value	string | number | boolean	—	未选中时的值
id	string	—	原生 id
border	boolean	false	边框
size	'large' | 'default' | 'small'	'default'	尺寸
tabindex	string | number	—	tabindex
aria-label	string	—	aria-label
validate-event	boolean	true	值变化时是否触发表单项校验

FxCheckbox Events

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

FxCheckbox Slots

插槽名	说明
default	标签内容

FxCheckboxGroup Props

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

FxCheckboxBtn Props

同 FxCheckbox（无 border）。