Checkbox

Checkbox component encapsulation, works better with z-form component.

Basic Usage

Pass in options to automatically generate options

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 },
])

const checkboxVal = ref([1])

function click() {
  options.value.push({ label: '选项四', value: 4 })
}

function handleCheckboxChange(val: number[]) {
  console.log(val)
}
</script>

<template>
  <el-button @click="click">
    Click
  </el-button>
  <z-checkbox v-model="checkboxVal" :options="options" @change="handleCheckboxChange" />
</template>

Disabled

Set disabled to true for a certain item in option

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

const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2, disabled: true },
  { label: 'Option 3', value: 3 },
])

const checkboxVal = ref([1])
</script>

<template>
  <z-checkbox v-model="checkboxVal" :options="options" />
</template>

Disable all, pass disabled as true to the component

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

const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 },
])

const checkboxVal = ref([1])
</script>

<template>
  <z-checkbox v-model="checkboxVal" :disabled="true" :options="options" />
</template>

Key-Value Configuration

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

const options = ref([
  { data: { title: 'Option 1' }, key: 1 },
  { data: { title: 'Option 2' }, key: 2 },
  { data: { title: 'Option 3' }, key: 3 },
])

const alias = {
  label: 'data.title',
  value: 'key',
}

const checkboxVal = ref([1])
</script>

<template>
  <z-checkbox v-model="checkboxVal" :alias="alias" :options="options" />
</template>

Button Style

Set type for a certain item in option or pass type directly to the component

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

const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3, type: 'checkbox-button' },
])

const checkboxVal = ref([1])
</script>

<template>
  <z-checkbox v-model="checkboxVal" type="checkbox-button" :options="options" />
  <z-checkbox v-model="checkboxVal" :options="options" class="mt-4" />
</template>

With Border

The border attribute or field can be rendered as a checkbox with border.

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

const options = ref([
  { label: 'Option 1', value: 1, border: true },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 },
])

const checkboxVal = ref([1])
</script>

<template>
  <z-checkbox v-model="checkboxVal" :options="options" />
  <z-checkbox v-model="checkboxVal" :border="true" :options="options" class="mt-4" />
</template>

z-checkbox Attributes

Attribute	Description	Type	Default
model-value / v-model	Binding value	array	—
options	Configurable options	array	—
type	Checkbox form	string	checkbox
alias	Key-value pair configuration	object	{ label: 'label', value: 'value', disabled: 'disabled' }
border	Whether to show border	boolean	false
size	Size of checkbox button or border button	string	default
disabled	Whether to disable	boolean	false
text-color	Text color when checkbox button is active	string	#ffffff
fill	Fill color and border color when checkbox button is active	string	#409EFF
validate-event	Whether to trigger form validation when input	boolean	true
name	Native name attribute	string	—
id	Native id attribute	string	—

z-checkbox Events

Event Name	Description	Type
change	Event triggered when binding value changes	Function

Options Item Configurable Attributes

Attribute	Description	Type	Default
value	Binding value of checkbox	string / number / boolean	—
label	Text of checkbox	string	—
disabled	Whether to disable checkbox	boolean	false
border	Whether to show border	boolean	false
size	Size of checkbox	enum	—
name	Native name attribute	string	—
type	Checkbox form	string	el-checkbox