Vue DevUI
主题

CheckBox 复选框

多选框。

何时使用

  1. 在一组选项中进行多项选择；
  2. 单独使用可以表示在两个状态之间切换，可以和提交操作结合。

基本用法 

<template>
  <div class="checkbox-basic-demo">
    <d-checkbox label="Checked" :isShowTitle="false" v-model="checked" />
    <d-checkbox label="Not checked" :isShowTitle="false" v-model="unchecked" />
    <d-checkbox label="Custom title" :isShowTitle="true" title="my title" v-model="unchecked2" />
    <d-checkbox label="No Animation" :isShowTitle="false" v-model="checked2" :showAnimation="false" />
    <d-checkbox label="Disabled" :isShowTitle="false" v-model="checked" :disabled="true" />
    <d-checkbox label="Disabled" :isShowTitle="false" v-model="unchecked" :disabled="true" />
    <d-checkbox label="Half-checked" :isShowTitle="false" :half-checked="halfCheck" v-model="allCheck" @change="onHalfCheckboxChange" />
    <d-checkbox
      label="Half-checked"
      :isShowTitle="false"
      :half-checked="halfCheck"
      v-model="allCheck"
      @change="onHalfCheckboxChange"
      :disabled="true"
    />
    <d-checkbox label="Custom color" :isShowTitle="false" v-model="customCheck" color="RGB(255, 193, 7)" />
    <d-checkbox
      label="Half-checked"
      :isShowTitle="false"
      :half-checked="halfCheck2"
      v-model="allCheck2"
      @change="onHalfCheckboxChange2"
      color="RGB(255, 193, 7)"
    />
    <d-checkbox :isShowTitle="false" v-model="unchecked3">
      <div class="inline-row" style="display: inline-flex">
        <d-select v-model="value1" :options="[1, 2, 3, 4]" size="sm" @click="handleChange"></d-select>
        <span>Custom label template</span>
      </div>
    </d-checkbox>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const checked = ref(true);
    const checked2 = ref(true);
    const unchecked = ref(false);
    const unchecked2 = ref(false);
    const unchecked3 = ref(false);
    const halfCheck = ref(true);
    const halfCheck2 = ref(true);
    const allCheck = ref(false);
    const allCheck2 = ref(false);
    const customCheck = ref(true);
    const value1 = ref(null);

    const onHalfCheckboxChange = (value) => {
      halfCheck.value = !allCheck.value;
      console.log('halfCheckbox checked:', value);
    };
    const onHalfCheckboxChange2 = (value) => {
      halfCheck2.value = !allCheck2.value;
      console.log('halfCheckbox checked:', value);
    };
    const handleChange = ($event) => {
      $event.preventDefault();
      $event.stopPropagation();
    };
    return {
      checked,
      checked2,
      unchecked,
      unchecked2,
      unchecked3,
      halfCheck,
      halfCheck2,
      allCheck,
      allCheck2,
      onHalfCheckboxChange,
      customCheck,
      onHalfCheckboxChange2,
      handleChange,
      value1,
    };
  },
});
</script>
<style>
.checkbox-basic-demo .devui-checkbox {
  margin-bottom: 10px;
}

.checkbox-basic-demo .inline-row .devui-select {
  width: 150px;
  margin-right: 10px;
}
</style>

使用 CheckBoxGroup

Input Object Array

Input String Array

Disabled Group

Custom Selected Color

Set showAnimation false

Multi-line Checkbox

可选项目数量的限制

插槽方式


<template>
  <div class="checkbox-group-demo">
    <h4 class="title">Input Object Array</h4>
    <d-checkbox-group v-model="values1" :options="options1" direction="row"></d-checkbox-group>

    <h4 class="title">Input String Array</h4>
    <d-checkbox-group v-model="values2" :options="options2" :isShowTitle="false" direction="row"></d-checkbox-group>

    <h4 class="title">Disabled Group</h4>
    <d-checkbox-group v-model="values2" :options="options2" :isShowTitle="false" direction="row" :disabled="true"
    ></d-checkbox-group>

    <h4 class="title">Custom Selected Color</h4>
    <d-checkbox-group
      v-model="values3"
      :options="options3"
      :isShowTitle="false"
      direction="row"
      color="RGB(255, 193, 7)"
    ></d-checkbox-group>

    <h4 class="title">Set showAnimation false</h4>
    <d-checkbox-group v-model="values4" :options="options3" :isShowTitle="false" direction="row" :showAnimation="false"
    ></d-checkbox-group>

    <h4 class="title">Multi-line Checkbox</h4>
    <d-checkbox-group v-model="values5" :options="options5" :isShowTitle="false" direction="row" :itemWidth="94"
    ></d-checkbox-group>

    <h4 class="title">可选项目数量的限制</h4>
    <d-checkbox-group
      v-model="values6"
      :options="options5"
      :isShowTitle="false"
      direction="row"
      :itemWidth="94"
      :max="3"
    ></d-checkbox-group>
    <h4 class="title">插槽方式</h4>
    <d-checkbox-group v-model="values7" :isShowTitle="false" direction="row" :itemWidth="94" :max="3">
      <d-checkbox v-for="item in options1" :key="item.value" :label="item.name" :value="item.value"></d-checkbox>
    </d-checkbox-group>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const options1 = ref([
      { name: 'data1', disabled: true, value: '1', id: 1 },
      { name: 'data2', value: '2', id: 2 },
      { name: 'data3', value: '3', id: 3 },
    ]);
    const values1 = ref([{ name: 'data2', value: '2', id: 2 }]);
    const options2 = ref(['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7']);
    const values2 = ref(['data1', 'data2']);
    const options3 = ref(['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7']);
    const values3 = ref(['data1', 'data2']);
    const values4 = ref(['data2', 'data3']);
    const options5 = ref([
      'data00000000000000001',
      'data2',
      'data3',
      'data4',
      'data5',
      'data6',
      'data7',
      'data8',
      'data9',
      'data10',
      'data11',
      'data12',
      'data13',
      'data14',
      'data15',
    ]);
    const values5 = ref(['data2', 'data3']);
    const values6 = ref(['data2', 'data3']);
    const values7 = ref(['2', '3']);
    return {
      options1,
      values1,
      options2,
      values2,
      options3,
      values3,
      values4,
      options5,
      values5,
      values6,
      values7,
    };
  },
});
</script>
<style>
.checkbox-group-demo .title {
  margin: 20px 0;
}
</style>

尺寸和边框

Small

Middle

Large


<template>
  <h4>Small</h4>
  <d-checkbox-group v-model="borderSizeValues1" :options="borderSizeOptions1" direction="row" size="sm" border
  ></d-checkbox-group>

  <h4>Middle</h4>
  <d-checkbox-group v-model="borderSizeValues2" :options="borderSizeOptions1" direction="row" size="md" border
  ></d-checkbox-group>

  <h4>Large</h4>
  <d-checkbox-group v-model="borderSizeValues3" :options="borderSizeOptions1" direction="row" size="lg" border
  ></d-checkbox-group>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const borderSizeOptions1 = ref([
      { name: 'Summer', value: '1', id: 1 },
      { name: 'Spring', disabled: true, value: '2', id: 2 },
    ]);
    const borderSizeValues1 = ref([{ name: 'Summer', value: '1', id: 1 }]);
    const borderSizeValues2 = ref([{ name: 'Summer', value: '1', id: 1 }]);
    const borderSizeValues3 = ref([{ name: 'Summer', value: '1', id: 1 }]);

    return {
      borderSizeValues1,
      borderSizeValues2,
      borderSizeValues3,
      borderSizeOptions1,
    };
  },
});
</script>

按钮形态

需要把 d-checkbox 替换成 d-checkbox-button， 数组源可为普通数组、对象数组等。

禁用

默认

自定义填充颜色、文字颜色


<template>
  <h4>禁用</h4>
  <d-checkbox-group v-model="buttonValues1" size="sm" direction="row">
    <d-checkbox-button
      v-for="item in buttonOptions1"
      :label="item.label"
      :value="item.value"
      :key="item.value"
      :disabled="item.disabled"
    >
    </d-checkbox-button>
  </d-checkbox-group>

  <h4>默认</h4>
  <d-checkbox-group v-model="buttonValues2" direction="row">
    <d-checkbox-button v-for="item in buttonOptions1" :label="item.label" :value="item.value" :key="item.value"
    ></d-checkbox-button>
  </d-checkbox-group>

  <h4>自定义填充颜色、文字颜色</h4>
  <d-checkbox-group v-model="buttonValues3" size="lg" is-show-title color="#FA9841" text-color="#fff" direction="row">
    <d-checkbox-button
      v-for="item in buttonOptions1"
      :label="item.label"
      :value="item.value"
      :key="item.value"
      :title="item.title"
    >
    </d-checkbox-button>
  </d-checkbox-group>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const buttonOptions1 = ref([
      { label: '选项1', disabled: true, value: 2, id: 1, title: '自定义title1' },
      { label: '选项2', value: 3, id: 2, title: '自定义title2' },
      { label: '选项3', value: 4, id: 3, title: '自定义title3' },
    ]);
    const buttonValues1 = ref([2]);
    const buttonValues2 = ref([2]);
    const buttonValues3 = ref([2]);

    return {
      buttonValues1,
      buttonValues2,
      buttonValues3,
      buttonOptions1,
    };
  },
});
</script>

checkbox 根据条件终止切换状态

根据条件判断，label 为'条件判断回调禁止选中'的 checkbox 终止切换状态。


<template>
  <div style="margin-bottom: 10px">
    <d-checkbox
      label="Conditional Callback Allowed"
      :isShowTitle="false"
      v-model="checkboxChecked1"
      @change="onCheckboxEndChange"
      :beforeChange="endBeforeChange"
    />
  </div>
  <div>
    <d-checkbox
      label="Conditional Judgment Callback Interception Selected"
      :isShowTitle="false"
      v-model="checkboxChecked2"
      @change="onCheckboxEndChange"
      :beforeChange="endBeforeChange"
    />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const checkboxChecked1 = ref(true);
    const checkboxChecked2 = ref(false);

    const onCheckboxEndChange = (value) => {
      console.log('checkbox1 checked:', value);
    };

    const endBeforeChange = (isChecked, label) => {
      return label === 'Conditional Callback Allowed';
    };
    return {
      checkboxChecked1,
      checkboxChecked2,
      onCheckboxEndChange,
      endBeforeChange,
    };
  },
});
</script>

checkbox-group 根据条件终止切换状态

选项包含'拦截'字段的 checkbox 无法切换状态。


<template>
  <div>
    <d-checkbox-group
      v-model="interceptValues"
      :options="interceptOptions"
      :isShowTitle="false"
      direction="row"
      @change="onCheckboxInterceptChange"
      :beforeChange="interceptBeforeChange"
    />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const interceptOptions = ref(['data1', 'data2', 'intercept', 'intercept2', 'data5', 'data6', 'data7']);
    const interceptValues = ref(['data2', 'intercept']);
    const onCheckboxInterceptChange = (value) => {
      console.log('checkbox1 checked:', value);
    };

    const interceptBeforeChange = (isChecked, label) => {
      return !label.includes('intercept');
    };

    return {
      interceptOptions,
      interceptValues,
      onCheckboxInterceptChange,
      interceptBeforeChange,
    };
  },
});
</script>

Checkbox 参数

参数类型默认说明跳转 Demo
namestring--可选，表单域名，input 原生 name 属性基本用法
labelstring--可选，显示标签基本用法
valuestring|number--可选，选中状态的值（只有在 checkbox-group 或者绑定对象为 array 时有效）使用 CheckBoxGroup
half-checkedbooleanfalse可选，半选状态基本用法
is-show-titlebooleantrue可选，是否显示 title 提示，
默认显示参数label的值		基本用法
titlestring--可选，显示自定义 title 提示内容基本用法
colorstring--可选，复选框颜色基本用法
show-animationbooleantrue可选，控制是否显示动画基本用法
disabledbooleanfalse可选，是否禁用基本用法
before-changeFunction|Promise<boolean>--可选，checkbox 切换前的回调函数，
返回 boolean 类型，返回 false 可以阻止 checkbox 切换		基本用法
sizeICheckboxSizemd可选， checkbox 尺寸，只有在 border 属性存在时生效尺寸
borderbooleanfalse可选， 是否有边框边框

Checkbox 事件

事件说明跳转 Demo
change复选框的值改变时发出的事件，值是当前状态基本用法

CheckboxGroup 参数

参数类型默认说明跳转 Demo
namestring--可选，表单域名，input 原生 name 属性使用 CheckBoxGroup
direction'row' | 'column''column'可选，显示方向使用 CheckBoxGroup
item-widthnumber--可选，表示每一项 checkbox 的宽度(px)使用 CheckBoxGroup
optionsarray[]可选，复选框选项数组使用 CheckBoxGroup
half-checkedbooleanfalse可选，半选状态使用 CheckBoxGroup
is-show-titlebooleantrue可选，是否显示 title 提示，
默认显示参数label的值		使用 CheckBoxGroup
colorstring--可选，复选框颜色使用 CheckBoxGroup
show-animationbooleantrue可选，控制是否显示动画,按钮形态不可用使用 CheckBoxGroup
disabledbooleanfalse可选，是否禁用使用 CheckBoxGroup
maxnumber--可选，可被勾选的 checkbox 的最大数量使用 CheckBoxGroup
before-changeFunction|
Promise<boolean>		--可选，checkbox 切换前的回调函数，
返回 false 可以阻止 checkbox 切换		使用 CheckBoxGroup
sizeICheckboxSizemd可选， checkbox 尺寸，只有在 border 属性存在时生效尺寸
borderbooleanfalse可选， 是否有边框边框
text-colorstring--可选， 按钮被选中的字体样式，只存在于按钮形态中按钮形态

CheckboxGroup 事件

事件说明跳转 Demo
changecheckbox 值改变事件使用 change 事件

CheckboxButton 参数

参数类型默认说明跳转 Demo
namestring--可选，表单域名，input 原生 name 属性按钮形态
labelstring--可选，显示标签按钮形态
valuestring|number--可选，选中状态的值（只有在 checkbox-group 或者绑定对象为 array 时有效）按钮形态
is-show-titlebooleantrue可选，是否显示 title 提示，
默认显示参数label的值		按钮形态
titlestring--可选，显示自定义 title 提示内容按钮形态
disabledbooleanfalse可选，是否禁用按钮形态
before-changeFunction|Promise<boolean>--可选，checkbox 切换前的回调函数，
返回 boolean 类型，返回 false 可以阻止 checkbox 切换		按钮形态
sizeICheckboxSizemd可选， checkbox 尺寸按钮形态

Checkbox 类型定义

ICheckboxSize 

type ICheckboxSize = 'lg' | 'md' | 'sm';
Contributors
粤A2-20044005号