Checkbox 复选框

用于在多个选项中进行多选的复选框组件

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

const checked = ref(false)
const checkedItems = ref([])
</script>

<template>
  <div class="flex gap-4 p-4">
    <SkCheckbox v-model="checked" label="独立复选框" />

    <SkCheckboxGroup v-model="checkedItems">
      <SkCheckbox value="option1" label="组合复选框 1" />
      <SkCheckbox value="option2" label="组合复选框 2" />
    </SkCheckboxGroup>
  </div>
</template>

用法 (Checkbox)

Controlled 选中状态

Prop	类型	默认值	描述
`v-model`	`boolean`	`false`	复选框的选中状态 (双向绑定)

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

const checked = ref(false)
</script>

<template>
  <SkCheckbox v-model="checked">
    确认输入信息无误
  </SkCheckbox>
</template>

Label 标签

Prop	类型	默认值	描述
`label`	`string`	-	设置复选框标签

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

const option1 = ref(false)
const option2 = ref(true)
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkCheckbox v-model="option1">
      我同意用户协议和隐私政策
    </SkCheckbox>
    <SkCheckbox v-model="option2" label="接收产品更新和营销信息" />
  </div>
</template>

Color 颜色

Prop	类型	默认值	描述
`color`	`{Color}`	`brand`	设置复选框的颜色主题

Color	描述
`neutral`	中性态颜色
`brand`	主要态颜色
`success`	成功态颜色
`warning`	警告态颜色
`danger`	危险态颜色

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

const neutral = ref(true)
const primary = ref(true)
const success = ref(true)
const warning = ref(true)
const danger = ref(true)
</script>

<template>
  <div class="p-4 flex flex-col gap-3">
    <SkCheckbox v-model="primary" label="主要复选框" color="brand" />
    <SkCheckbox v-model="success" label="成功复选框" color="success" />
    <SkCheckbox v-model="warning" label="警告复选框" color="warning" />
    <SkCheckbox v-model="danger" label="危险复选框" color="danger" />
    <SkCheckbox v-model="neutral" label="中性复选框" color="neutral" />
  </div>
</template>

Size 尺寸

Prop	类型	默认值	描述
`size`	`{Size}`	`medium`	设置复选框的尺寸大小

Size	描述
`small`	小型
`medium`	中型
`large`	大型

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

const small = ref(true)
const medium = ref(true)
const large = ref(true)
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkCheckbox v-model="small" label="小型复选框" size="small" />
    <SkCheckbox v-model="medium" label="中型复选框" size="medium" />
    <SkCheckbox v-model="large" label="大型复选框" size="large" />
  </div>
</template>

Disabled 禁用

Prop	类型	默认值	描述
`disabled`	`boolean`	`false`	设置复选框是否为禁用状态

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

const normal = ref(false)
const normalChecked = ref(true)
const disabled = ref(false)
const disabledChecked = ref(true)
</script>

<template>
  <div class="p-4 flex flex-col gap-3">
    <SkCheckbox v-model="normal" label="正常状态（未选中）" />
    <SkCheckbox v-model="normalChecked" label="正常状态（已选中）" />
    <SkCheckbox v-model="disabled" label="禁用状态（未选中）" disabled />
    <SkCheckbox v-model="disabledChecked" label="禁用状态（已选中）" disabled />
  </div>
</template>

Indeterminate 半选状态

Prop	类型	默认值	描述
`indeterminate`	`boolean`	`false`	设置复选框是否为半选状态 (不受双向绑定控制，直到自设置为 false)

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

const checked = ref(false)
const indeterminate = ref(false)
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkCheckbox v-model="checked" label="正常状态" />
    <SkCheckbox v-model="indeterminate" :indeterminate="true" label="半选状态" />
  </div>
</template>

Value 值标识

配合 SkCheckboxGroup 使用时，value 属性是必填项

Prop	类型	默认值	描述
`value`	`string`	-	设置复选框标识，在复选组中作为是否被识别选中的值

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

const checkedItems = ref([])
</script>

<template>
  <div class="p-4">
    <SkCheckboxGroup v-model="checkedItems">
      <SkCheckbox value="option1" label="黄山" />
      <SkCheckbox value="option2" label="庐山" />
      <SkCheckbox value="option3" label="雁荡山" />
    </SkCheckboxGroup>
  </div>
</template>

用法 (CheckboxGroup)

Controlled 选中值列表

Prop	类型	默认值	描述
`v-model`	`string[]`	-	复选框组的选中值列表 (双向绑定)

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

const checkedItems = ref(['option1', 'option2'])
</script>

<template>
  <SkCheckboxGroup v-model="checkedItems">
    <SkCheckbox value="option1" label="长白山" />
    <SkCheckbox value="option2" label="张家界" />
  </SkCheckboxGroup>
</template>

Direction 排列方向

Prop	类型	默认值	描述
`direction`	`{Direction}`	`vertical`	设置整个复选框组的排列方向

Direction	描述
`vertical`	垂直
`horizontal`	水平

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

const checkedItems = ref([])
</script>

<template>
  <div class="p-4">
    <SkCheckboxGroup v-model="checkedItems" direction="horizontal">
      <SkCheckbox value="option1" label="黄山" />
      <SkCheckbox value="option2" label="庐山" />
      <SkCheckbox value="option3" label="雁荡山" />
    </SkCheckboxGroup>
  </div>
</template>

Color 整组颜色

Prop	类型	默认值	描述
`color`	继承 Checkbox Color	`brand`	设置整个复选框组的颜色主题，会被 Checkbox 的 color 继承/覆盖

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

const checkedItems = ref(['option1', 'option2', 'option3'])
</script>

<template>
  <div class="p-4">
    <SkCheckboxGroup v-model="checkedItems" color="success">
      <SkCheckbox value="option1" label="峨眉山" />
      <SkCheckbox value="option2" label="武当山" color="warning" />
      <SkCheckbox value="option3" label="老君山" />
    </SkCheckboxGroup>
  </div>
</template>

Size 整组尺寸

Prop	类型	默认值	描述
`size`	继承 Checkbox Size	`medium`	设置整个复选框组的尺寸，会被 Checkbox 的 size 继承/覆盖

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

const checkedItems = ref(['option1', 'option2', 'option3'])
</script>

<template>
  <div class="p-4">
    <SkCheckboxGroup v-model="checkedItems">
      <SkCheckbox value="option1" label="峨眉山" />
      <SkCheckbox value="option2" label="武当山" />
      <SkCheckbox value="option3" label="老君山" size="large" />
    </SkCheckboxGroup>
  </div>
</template>

Disabled 整组禁用

Prop	类型	默认值	描述
`disabled`	`boolean`	`false`	设置是否禁用整个复选框组

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

const checkedItems = ref(['option2', 'option4'])
</script>

<template>
  <div class="p-4">
    <SkCheckboxGroup v-model="checkedItems" disabled>
      <SkCheckbox value="option1" label="北岳恒山" />
      <SkCheckbox value="option2" label="西岳华山" />
      <SkCheckbox value="option3" label="中岳嵩山" />
      <SkCheckbox value="option4" label="东岳泰山" />
      <SkCheckbox value="option5" label="南岳衡山" />
    </SkCheckboxGroup>
  </div>
</template>

接口 (Checkbox)

Props

属性名	类型	默认值	描述
`v-model`	`boolean`	`false`	详见 Controlled 选中状态
`label`	`string`	-	详见 Label 标签
`color`	`{Color}`	`'brand'`	详见 Color 颜色
`size`	`{Size}`	`'medium'`	详见 Size 尺寸
`disabled`	`boolean`	`false`	详见 Disabled 禁用
`indeterminate`	`boolean`	`false`	详见 Indeterminate 半选状态
`value`	`string`	-	详见 Value 值标识
`clax`	`WIP`	-	用于拓展当前基础样式

Emits

事件名	参数	描述
`change`	`(checked: boolean, value?: string)`	当复选框状态改变时触发

Slots

插槽名	属性	描述
`default`	-	复选框的标签内容

接口 (CheckboxGroup)

Props

属性名	类型	默认值	描述
`v-model`	`string[]`	-	详见 Controlled 选中值列表
`direction`	`{Direction}`	`'vertical'`	详见 Direction 排列方向
`color`	`{Color}`	`'brand'`	详见 Color 整组颜色，会被 Checkbox 组件继承或覆盖
`size`	`{Size}`	`'medium'`	详见 Size 整组尺寸，会被 Checkbox 组件继承或覆盖
`disabled`	`boolean`	`false`	详见 Disabled 整组禁用，会被 Checkbox 组件继承或覆盖
`clax`	`WIP`	-	用于拓展当前基础样式

Emits

事件名	参数	描述
`change`	`(values: string[])`	当复选框状态改变时触发

Slots

插槽名	属性	描述
`default`	-	复选框列表

交互

正在完善中，敬请期待！😊