ZCheckbox

多选框。版本要求 >= 1.1.0

• 与其它多选框没什么两样，只是多了color 和 size 两个属性，通过 color 你可以自定义选中状态下的颜色，而 size 可以改变复选框的大小。

基础用法

Checkbox

<template>
  <div>
    <z-checkbox v-model:checked="state">Checkbox</z-checkbox>
  </div>
</template>

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

const state = ref(false);
</script>

<style lang="less" scoped>

</style>

禁用

使用 disabled 启用禁用。

Checkbox

<template>
  <div>
    <z-checkbox v-model:checked="state" :disabled="disabled">Checkbox</z-checkbox>

    <div class="mt12">
      <z-button size="small" type="primary" @click="state = !state">{{state ? 'check' : 'UnCheck'}}</z-button>
      <z-button size="small" type="primary" @click="disabled = !disabled">{{state ? 'Disabled' :  'Enable'}}</z-button>
    </div>
  </div>
</template>

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

const state = ref(false);
const disabled = ref(false);
</script>

<style lang="less" scoped>
.mt12 {
  margin-top: 12px;
}
</style>

全选

在实现全选效果时，你可能会用到 indeterminate 属性。

Check All

AppleOrangePearBanana

<template>
  <div>
    <z-checkbox v-model:checked="state" :indeterminate="indeterminate" @change="changeAll">Check All</z-checkbox>

    <z-checkbox-group v-model:value="checkedList" :options="options"></z-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import {ref, watch} from "vue";

const state = ref(false);
const indeterminate = ref(false);

const checkedList = ref(["Orange", "Banana"]);
const options = ref(["Apple", "Orange", "Pear", "Banana"]);

const changeAll = (e: boolean) => {
  indeterminate.value = false;
  checkedList.value = e ? options.value : [];
}

watch(() => checkedList.value, () => {
  state.value = checkedList.value.length === options.value.length;
  indeterminate.value = !!(checkedList.value.length && checkedList.value.length !== options.value.length)
}, {
  immediate: true
});

</script>

<style lang="less" scoped>

</style>

自定义色彩和尺寸

使用 color、 size 设置主题色和复选框大小

CheckboxCheckboxCheckbox

<template>
  <div>
    <z-checkbox v-model:checked="state">Checkbox</z-checkbox>
    <z-checkbox color="#90a759" v-model:checked="state2">Checkbox</z-checkbox>
    <z-checkbox color="#9370ac" :size="24" v-model:checked="state3">Checkbox</z-checkbox>
  </div>
</template>

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

const state = ref(true);
const state2 = ref(true);
const state3 = ref(true);
</script>

<style lang="less" scoped>

</style>

分组

方便的从数组生成 checkbox

AppleOrangePearBanana

AppleOrangePearBanana

AppleOrangePearBanana

Apple

Orange

Pear

Banana

<template>
  <div>
    <z-checkbox-group v-model:value="checkedList" :options="options"></z-checkbox-group>
    <br/>
    <z-checkbox-group v-model:value="checkedListB" :options="optionsB"></z-checkbox-group>
    <br/>
    <z-checkbox-group v-model:value="checkedListC" :options="optionsC" color="#26c6da" :size="20"></z-checkbox-group>
    <br/>
    <z-checkbox-group v-model:value="checkedListD" :options="optionsD" disabled>
      <template #label="{label}">
        <div style="color: red">{{label}}</div>
      </template>
    </z-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { TCheckboxGroupOption } from "@d7ee/z-base-ui/dist/types/components/ZCheckboxGroup";

const checkedList = ref(["Orange", "Banana"]);
const options = ref(["Apple", "Orange", "Pear", "Banana"]);



const onChange = (e: any) => {
  console.log(e);
};
const checkedListB = ref<TCheckboxGroupOption>(["Apple", "Banana"]);
const optionsB = ref<TCheckboxGroupOption>([
  {label: "Apple", value: "Apple", color: "#99a559"},
  {label: "Orange", value: "Orange", disabled: true},
  {label: "Pear", value: "Pear"},
  {label: "Banana", value: "Banana", onChange: onChange},
]);


const checkedListC = ref<TCheckboxGroupOption>(["Apple", "Banana"]);
const optionsC = ref<TCheckboxGroupOption>([
  {label: "Apple", value: "Apple"},
  {label: "Orange", value: "Orange", disabled: true},
  {label: "Pear", value: "Pear"},
  {label: "Banana", value: "Banana"},
])

const checkedListD = ref<TCheckboxGroupOption>(["Apple", "Banana"]);
const optionsD = ref<TCheckboxGroupOption>([
  {label: "Apple", value: "Apple"},
  {label: "Orange", value: "Orange"},
  {label: "Pear", value: "Pear"},
  {label: "Banana", value: "Banana"},
]);
</script>

<style lang="less" scoped>

</style>

布局

CheckBox.Group内嵌Checkbox，实现更灵活的布局

AppleOrangePearBanana

<template>
  <div>
    <z-checkbox-group v-model:value="checkedList">
      <z-checkbox v-for="item in options" :value="item" :key="item">{{item}}</z-checkbox>
    </z-checkbox-group>
  </div>
</template>

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

const checkedList = ref(["Orange", "Banana"]);
const options = ref(["Apple", "Orange", "Pear", "Banana"]);
</script>

<style lang="less" scoped>

</style>

API 属性

属性名	说明	类型	默认值
checked	选中状态，使用v-model:value绑定	boolean | sting | number	false
disabled	不可用，禁用	boolean	false
size	复选框尺寸	number	18px
color	选中后的主题色	string	—
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	false
value	设置选中时使的值	boolean | string | number	—

Checkbox Group

属性名	说明	类型	默认值
value	指定选中的项，使用v-model:value绑定	(boolean |sting |number)[]	[]
options	指定可选项	string[] | group-options	[]
disabled	整组禁用	boolean	false
size	复选框尺寸	number	18px
color	选中后的主题色	string	—
vertical	垂直模式	boolean	false
gap	间距	string	12px

Group Options

type TCheckboxGroupOption = string[] | Array<{
  // 选中值
  value: string | number | boolean,
  // 标题
  label: string,
  // 回调事件
  onChange?: (params?: boolean) => void,
  // 选中时的颜色
  color?: string,
  // 禁用
  disabled?: boolean,
  // 尺寸
  size?: number
}>;

slot 插槽

通过插槽可接收二个参数，data为数值，percentage 为百分比类型均为number

slotName	说明	参数
label	定制label	{label, value, disabled}

event 事件

// Checkbox - change
function(selectValue: string | boolean | number | undefined){};


// Checkbox Group - change
function(selectList: (string | boolean | number)[], selectValue: string | boolean | number | undefined){};