Checkbox 复选框

复选框组件，具有 SVG 动画勾选效果。

import { ref } from 'vue' const checked1 = ref(false) const checked2 = ref(true) const checked3 = ref(false) const checked4 = ref(true) const checked5 = ref(false)

基础用法

Checkbox

示例即将加载...

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

文案在前（labelPlacement = start）

Checkbox (label start)

示例即将加载...

<template>
  <TxCheckbox v-model="checked" label="我在前面" label-placement="start" />
</template>

无文案

无 label / 无插槽时，建议传入 aria-label。

Checkbox (no label)

示例即将加载...

<template>
  <TxCheckbox v-model="checked" aria-label="勾选" />
</template>

禁用状态

Checkbox (disabled)

示例即将加载...

<template>
  <TxCheckbox v-model="checked" label="禁用" disabled />
</template>

使用插槽

Checkbox (slot)

示例即将加载...

<template>
  <TxCheckbox v-model="checked">
    <span>自定义标签</span>
  </TxCheckbox>
</template>

API

Props

属性名	说明	类型	默认值
modelValue / v-model	绑定值	`boolean`	`false`
disabled	是否禁用	`boolean`	`false`
label	标签文本	`string`	-
labelPlacement	标签位置（start=前置，end=后置）	`'start' \| 'end'`	`'end'`
ariaLabel	无标签时的可访问性文本	`string`	-

Events

事件名	说明	回调参数
change	状态改变时触发	`(value: boolean) => void`
update:modelValue	值更新时触发	`(value: boolean) => void`

Slots

插槽名	说明
default	自定义标签内容