Liv Web2文档

Appearance

Checkbox 多选框 ​

用于表单多选数据。

全局配置 ​

在全局配置组件属性。

Checkbox组件属性配置
ts
app.provide(CHECKBOX_KEY, {
  size: 'default',
  type: 'default',
  min: 0,
  max: 3,
  // others props...
});

基础用法 ​

传入data属性即可生成对应的数据，data属性可以是数组、Promise、Callback函数、Getter函数。

多选框类型 ​

通过type属性可以设置多选框的类型。

属性&事件透传 ​

该组件基于ElCheckbox封装，所以你可以传入ElCheckboxGroup的所有属性、事件，并且在数据数组中，你可以透传属性和事件给对应的ElCheckbox和ElCheckboxButton。

属性 ​

属性名说明类型默认值
model-value / v-model选中项绑定值，默认绑定value-key对应的值T[keyof T] / T[keyof T][]—
data组件数据LoadData<T>/ () => LoadData<T>[]
label-key指定列表项文字为数据对象的某个属性值stringlabel
value-key指定列表项选中后绑定值为数据对象的某个属性值stringvalue
type多选框类型enumdefault
类型声明
ts
import type { LoadData } from '@liv-web/utils';
import type { CheckboxGroupProps as ElCheckboxGroupProps } from 'element-plus';

/**
 * 多选框组件属性
 * @template T 多选按钮数据类型
 */
export interface CheckboxProps<T> {
  /**
   * 组件数据
   * @remarks 可以是数组、Promise、Callback函数、Getter函数
   * @defaultValue []
   */
  data?: LoadData<T> | (() => LoadData<T>);
  /**
   * 指定多选按钮文字为数据对象的某个属性值
   * @defaultValue 'label'
   */
  labelKey?: keyof T;
  /**
   * 指定多选按钮绑定值为数据对象的某个属性值
   * @defaultValue 'value'
   */
  valueKey?: keyof T;
  /**
   * 多选框类型
   * @defaultValue 'default'
   */
  type?: 'default' | 'button';
}

/**
 * 多选框组件包含透传属性在内的全部属性
 * @template T 多选按钮数据类型
 */
export type CheckboxFullProps<T> = Partial<ElCheckboxGroupProps & CheckboxProps<T>>;