dk-plus

English

简体中文

English

简体中文

Appearance

目录

Checkbox ​

在多个选项中进行多选。

Basic usage ​

The size attribute is used to control the size of the multi selection box, with a default of small.

vue
<template>
  <div class="box">
    <div class="box-item">
      <dk-checkbox v-model="checked" size="large" label="option1(large)"></dk-checkbox>
      <dk-checkbox size="medium" label="option2(medium)"></dk-checkbox>
      <dk-checkbox size="small" label="option3(small)"></dk-checkbox>
      <dk-checkbox size="mini" label="option4(mini)"></dk-checkbox>
    </div>
    <div class="box-item">
      <dk-checkbox disabled label="option1"></dk-checkbox>
      <dk-checkbox disabled label="option2"></dk-checkbox>
      <dk-checkbox disabled label="option3"></dk-checkbox>
      <dk-checkbox disabled label="option4"></dk-checkbox>
    </div>
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue'
  export default defineComponent({
    name: 'checkbox',
    setup() {
      const data = reactive({
        checked: true
      })
      return {
        ...toRefs(data)
      }
    }
  })
</script>
展开

Disabled state ​

Disable the checkbox through the disabled attribute.

html
<template>
  <dk-checkbox disabled label="disabled"></dk-checkbox>
  <dk-checkbox label="Not disabled "></dk-checkbox>
</template>
展开

group ​

dk-checkbox-groupis used for multiple selection box groups. Multipledk-checkboxes can be placed in the dk-checkbox-group.

vue
<template>
  <dk-checkbox-group v-model="checkList">
    <dk-checkbox
      v-for="item in checkList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></dk-checkbox>
  </dk-checkbox-group>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue'
  export default defineComponent({
    name: 'checkbox',
    setup() {
      const data = reactive({
        checkList: [
          { label: 'option1', value: '1' },
          { label: 'option2', value: '2' },
          { label: 'option3', value: '3' },
          { label: 'option4', value: '4' }
        ]
      })
      return {
        ...toRefs(data)
      }
    }
  })
</script>
展开

Intermediate ​

Use the indeterminate attribute to set the intermediate state of the multi selection box.

vue
<template>
  <dk-checkbox
    v-model="allCheck"
    :indeterminate="isIndeterminate"
    label="Select All"
    @change="handleAllCheckChange"
  ></dk-checkbox>
  <dk-checkbox-group v-model="checkList" @change="handleGroupChange">
    <dk-checkbox
      v-for="item in checkList"
      :key="item.value"
      v-model="item.checked"
      :label="item.label"
      :value="item.value"
    ></dk-checkbox>
  </dk-checkbox-group>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue'
  export default defineComponent({
    name: 'checkbox',
    setup() {
      const data = reactive({
        allCheck: false,
        isIndeterminate: true,
        checkList: [
          { label: 'option1', value: '1', checked: false },
          { label: 'option2', value: '2', checked: false },
          { label: 'option3', value: '3', checked: false },
          { label: 'option4', value: '4', checked: false }
        ]
      })
      const methods = reactive({
        handleAllCheckChange(val: boolean) {
          data.checkList.forEach(item => {
            item.checked = val
          })
          data.isIndeterminate = false
        },
        handleGroupChange(val: string[]) {
          data.allCheck = val.length === data.checkList.length
          data.isIndeterminate = val.length > 0 && val.length < data.checkList.length
        },
        getIndeterminate() {
          const isChecked = data.checkList.find(item => item.checked)
          if (isChecked !== undefined && data.allCheck === false) {
            return true
          }
          return false
        }
      })
      data.isIndeterminate = methods.getIndeterminate()
      return {
        ...toRefs(data),
        ...toRefs(methods)
      }
    }
  })
</script>
展开

SelectedQuantityLimit ​

The max attribute is used to set the maximum number of selected boxes.

vue
<template>
  <dk-checkbox-group v-model="checkList" :max="2">
    <dk-checkbox
      v-for="item in checkList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></dk-checkbox>
  </dk-checkbox-group>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue'
  export default defineComponent({
    name: 'checkbox',
    setup() {
      const data = reactive({
        checkList: [
          { label: 'option1', value: '1' },
          { label: 'option2', value: '2' },
          { label: 'option3', value: '3' },
          { label: 'option4', value: '4' }
        ]
      })
      return {
        ...toRefs(data)
      }
    }
  })
</script>
展开

With border ​

Set the border of the multi-selection box through the border attribute.

vue
<template>
  <dk-checkbox-group v-model="checkList" border>
    <dk-checkbox
      v-for="item in checkList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      border
    ></dk-checkbox>
  </dk-checkbox-group>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue'
  export default defineComponent({
    name: 'checkbox',
    setup() {
      const data = reactive({
        checkList: [
          { label: 'option1', value: '1' },
          { label: 'option2', value: '2' },
          { label: 'option3', value: '3' },
          { label: 'option4', value: '4' }
        ]
      })
      return {
        ...toRefs(data)
      }
    }
  })
</script>
展开

attribute ​

parameterexplaintypeOptional valuesDefault value
v-modelBindingValuebooleantrue false-
labelMultipleChoiceBoxCopystring--
valueThe true value of the multiple selection box(Do not set default tolabel)string--
sizeSize of Multiple Selection Boxstringlarge medium small minismall
disabledIs it disabledbooleantrue falsefalse
indeterminateIs it in an intermediate statebooleantrue falsefalse
borderIs there a borderbooleantrue falsefalse

Event ​

Event NameexplainCallback Arguments
changeTriggered when the binding value changes() => boolean

Slot ​

Slot Nameexplain
defaultDefault slotMultiple Choice Box Copy

checkbox-group attribute ​

parameterexplaintypeOptional valuesDefault value
maxMaximum selected quantitynumber--
v-modelBinding valuestring[]--

checkbox-group Event ​

Event NameexplainCallback Arguments
changeTriggered when the binding value changes(value: string[]) => void

Contributors ​