Checkbox 多选框

多选框封装，和z-form组件配合食用，风味更佳。

基础用法

传入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>

禁用

option中的某项设置disabled为true

<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>

全部禁用，组件传入disabled为true

<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>

键值对配置

<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>

按钮样式

给option某项设置type或者直接组件传入type

<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>

带有边框

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 属性

属性名	说明	类型	默认值
model-value / v-model	绑定值	array	[]
options	可配置项	array	—
type	checkbox 形式	string	el-checkbox
alias	键值对配置	object	{ label: 'label', value: 'value', disabled: 'disabled' }
border	是否显示边框	boolean	false
size	多选框组尺寸	enum	—
disabled	是否禁用	boolean	false
min	可被勾选的 checkbox 的最小数量	number	—
max	可被勾选的 checkbox 的最大数量	number	—
label	为屏幕阅读器准备的标签	string	—
text-color	当按钮为活跃状态时的字体颜色	string	#ffffff
fill	当按钮为活跃状态时的边框和背景颜色	string	#409EFF
tag	复选框组元素标签	string	div
validate-event	是否触发表单验证	boolean	true

z-checkbox 事件

事件名	说明	类型
change	当绑定值变化时触发的事件	Function

Options 项可配置属性

属性名	说明	类型	默认值
value	选中项绑定值	string / number / boolean	—
label	文案	string	—
trueLabel	选中时的值	string / number	—
falseLabel	没有选中时的值	string / number	—
disabled	是否禁用	boolean	false
border	是否显示边框	boolean	false
size	Checkbox 的尺寸	enum	—
name	原生 name 属性	string	—
id	input id	string	—
type	Checkbox 形式	string	el-checkbox