Checkbox 多选框

To be or not to be, that is the question.

import { DuCheckboxGroup, DuCheckbox } from 'dangoui'

使用说明

使用 DuCheckboxGroup 可以方便的管理选中的值，但在需要更加灵活的 UI 的场景中，你可以单独使用 DuCheckbox
shape 为 card 的时候，注意一下元素之间的间距，子元素四周还会有 3px 的占位空间，请在下方示例体验

示例

单独使用

<template>
  <PreviewBlock title="简单例子">
    <DuCheckbox v-model:checked="checked" />

    <DuCheckbox v-model:checked="checked" label="是否公开" position="left" />

    <DuCheckbox v-model:checked="checked" label="是否公开" position="right" />
  </PreviewBlock>
  <PreviewBlock title="Checkbox Group">
    <DuCheckboxGroup v-model:value="checkedItems" position="left">
      <DuCheckbox v-for="item in items" :key="item" :value="item" :label="item"  />
    </DuCheckboxGroup>
  </PreviewBlock>
  <PreviewBlock title="卡片类型">
    <div>
      <DuCheckbox v-model:checked="spuChecked" shape="card">
        <div class="w-81px h-108px object-contain">
          <img src="https://cdn.qiandaoapp.com/interior/images/J3hfXCaguhe3nlHBM0o8vuhslb8nkbVi.png!lfit_w180_png" />
        </div>
      </DuCheckbox>
    </div>

    <div>
      <DuCheckbox v-model:checked="tagChecked" shape="card">
        <div class="w-56px h-56px object-cover">
          <img src="https://cdn.qiandaoapp.com/treasure/images/uxaghFufnnoainMavlsnoDnqWnM07afZ.png!lfit_w180_png" />
        </div>
      </DuCheckbox>
    </div>
  </PreviewBlock>
  <PreviewBlock title="卡片类型（配置 Checkbox Group）">
    <DuCheckboxGroup v-model:value="checkedItems" position="right" inline shape="card">
      <DuCheckbox v-for="item in items" :key="item" :value="item" :label="item" />
    </DuCheckboxGroup>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuCheckboxGroup, DuCheckbox } from 'dangoui'

const checked = ref(false)

const checkedItems = ref(['🍎'])
const items = ['🍎', '🍌', '🍐']

const spuChecked = ref(true)

const tagChecked = ref(true)

const checkedSpus = ref(['梅'])

const spus = [
  { label: '梅', value: '梅', img: 'https://cdn.qiandaoapp.com/interior/images/J3hfXCaguhe3nlHBM0o8vuhslb8nkbVi.png!lfit_w900_png' },
  { label: '庭·怀静', value: '庭·怀静', img: 'https://cdn.qiandaoapp.com/interior/images/paegg6iRHiunUQzckVX3kmqJ2iwownCO.png!lfit_w900_png' },
  { label: '春·萌生', value: '春·萌生', img: 'https://cdn.qiandaoapp.com/interior/images/bjha0lIiLnqgFnvTPRnfbsnigpjvtezF.png!lfit_w900_png'},
  { label: '竹·入墨', value: '竹·入墨', img: 'https://cdn.qiandaoapp.com/interior/images/nXeiuoOikFgusbeaWylrehwKGiJoiKeq.png!lfit_w900_png'}
]
</script>

使用 CheckboxGroup

使用 DuCheckboxGroup 包裹 DuCheckbox 时，你不应该给 DuCheckbox 传递 checked 参数，即使传递也会被忽略

<template>
  <PreviewBlock title="Checkbox Group">
    <DuCheckboxGroup v-model:value="checkedItems" position="left">
      <DuCheckbox v-for="item in items" :key="item" :value="item" :label="item"  />
    </DuCheckboxGroup>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuCheckboxGroup, DuCheckbox } from 'dangoui'

const checked = ref(false)

const checkedItems = ref(['苹果'])
const items = ['苹果', '香蕉', '梨子']
</script>

各种颜色

<template>
  <PreviewBlock title="secondary">
    <DuCheckboxGroup color="secondary" v-model:value="checkedItems" position="left">
      <DuCheckbox v-for="item in items" :key="item" :value="item" :label="item"  />
    </DuCheckboxGroup>
  </PreviewBlock>
  <PreviewBlock title="success">
    <DuCheckboxGroup color="success" v-model:value="checkedItems" position="left">
      <DuCheckbox v-for="item in items" :key="item" :value="item" :label="item"  />
    </DuCheckboxGroup>
  </PreviewBlock>
  <PreviewBlock title="warning">
    <DuCheckboxGroup color="warning" v-model:value="checkedItems" position="left">
      <DuCheckbox v-for="item in items" :key="item" :value="item" :label="item"  />
    </DuCheckboxGroup>
  </PreviewBlock>
  <PreviewBlock title="error">
    <DuCheckboxGroup color="error" v-model:value="checkedItems" position="left">
      <DuCheckbox v-for="item in items" :key="item" :value="item" :label="item"  />
    </DuCheckboxGroup>
  </PreviewBlock>
  <PreviewBlock title="trade">
    <DuCheckboxGroup color="trade" v-model:value="checkedItems" position="left">
      <DuCheckbox v-for="item in items" :key="item" :value="item" :label="item"  />
    </DuCheckboxGroup>
  </PreviewBlock>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { DuCheckboxGroup, DuCheckbox } from 'dangoui'

const checked = ref(false)

const checkedItems = ref(['苹果'])
const items = ['苹果', '香蕉', '梨子']
</script>

API

Checkbox 属性

属性名	类型	默认值	说明
color	`string`	-	色彩，可以使用色板中的颜色名
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
size	`string`	`"20px"`	对勾图标大小
disabled	`boolean`	`false`	是否禁用
custom	`boolean`	`false`	自定义展示
border	`string`	`""`	对勾边框
value	`string`	-	值，配合 `CheckboxGroup` 使用
shape	`"round" \| "square" \| "card"`	-	形状
inline	`boolean`	-	行内元素
label	`string`	-	label，如果使用 `default slot`，可以不传
checked	`boolean`	-	是否选中，独立使用 `Checkbox` 时使用
position	`"left" \| "right"`	-	对勾图标位置

Checkbox 插槽

名称
default

Checkbox 事件

名称	类型
click	`(event: "click"): void`
update:checked	`(event: "update:checked", value: boolean): void`

CheckboxGroup 属性

属性名	类型	默认值	说明
color	`string`	-	色彩，可以使用色板中的颜色名
value	`string[]`	`[]`	当前选中的值
ext-class	`string \| string[] \| Record<string, boolean>`	`""`
ext-style	`string \| { [x: string]: string \| number; }`	`""`
shape	`"round" \| "square" \| "card"`	-	形状
inline	`boolean`	-	是否一行展示
custom	`boolean`	-	custom
position	`"left" \| "right"`	-	对勾图标位置

CheckboxGroup 插槽

名称
default

CheckboxGroup 事件

名称	类型
update:value	`(event: "update:value", value: string[]): void`
input	`(event: "input", value: string[]): void`