基础使用

同意协议

<script setup>
import { ref } from 'vue'
const val = ref(false)
</script>

<template>
  <c-checkbox v-model="val" label="同意协议" />
</template>

点击展开/收起代码

点击打开交互式编辑器

尺寸

超小尺寸

小尺寸

中等尺寸（默认）

大尺寸

超大尺寸

当前值：md

<script setup>
import { ref } from 'vue'
const val = ref('md')
</script>

<template>
  <div class="c-row c-gutter-md c-items-center">
    <c-checkbox
      v-model="val"
      checked-value="xs"
      size="xs"
      label="超小尺寸"
    />
    <c-checkbox
      v-model="val"
      checked-value="sm"
      size="sm"
      label="小尺寸"
    />
    <c-checkbox v-model="val" checked-value="md" label="中等尺寸（默认）" />
    <c-checkbox
      v-model="val"
      checked-value="lg"
      size="lg"
      label="大尺寸"
    />
    <c-checkbox
      v-model="val"
      checked-value="xl"
      size="xl"
      label="超大尺寸"
    />
  </div>
  <div>当前值：{{ val }}</div>
</template>

点击展开/收起代码

点击打开交互式编辑器

状态

禁用态

禁用态

<script setup>
import { ref } from 'vue'
const val1 = ref(false)
const val2 = ref(true)
</script>

<template>
  <c-checkbox v-model="val1" label="禁用态" disabled />
  <c-checkbox
    v-model="val2"
    label="禁用态"
    disabled
    class="c-ml-md"
  />
</template>

点击展开/收起代码

点击打开交互式编辑器

勾选框组

苹果

香蕉

橘子

桃子

当前值：[]

<script setup>
import { ref } from 'vue'

const val = ref([])

const options = [
  { label: '苹果', value: 'Apple' },
  { label: '香蕉', value: 'Banana' },
  { label: '橘子', value: 'Orange' },
  { label: '桃子', value: 'Peach' },
]
</script>

<template>
  <c-checkbox-group
    v-model="val"
    :options="options"
    class="c-row c-item-center c-gutter-x-md"
  />
  <div>当前值：{{ val }}</div>
</template>

点击展开/收起代码

点击打开交互式编辑器

CCheckbox API

Props

Events

modelValue

CCheckboxModel

*

是否处于勾选状态，用于v-model绑定用

theme

CTheme

默认值  'primary'

主题

size

CSize

默认值  'md'

尺寸

label

string

默认值  ''

文字

checkedValue

CCheckboxModel

默认值  true

选中时的值

disabled

boolean

默认值  false

是否禁用

CCheckboxGroup API

Props

Events

options

Array<{ label: string; value: CCheckboxModel }>

默认值  () => []

选项数组

modelValue

Array<CCheckboxModel>

*

当前选中值数组，用于v-model绑定

size

CSize

默认值  'md'

尺寸

gutterSize

CSize

默认值  'md'

勾选框间距尺寸