ERP 组件库

Appearance

复选框 Checkbox ​

在一组数据中，用户可通过复选框选择一个或多个数据。 ​

基本用法 ​

复选框的基本用法。

代码事例
vue
<template>
  <fk-checkbox value="1">Option 1</fk-checkbox>
</template>

受控 ​

通过 v-model (model-value) 属性控制是否选中

代码事例
vue
<template>
  <fk-space size="large">
    <fk-checkbox v-model="checked1">v-model</fk-checkbox>
    <fk-checkbox :model-value="true">binding value</fk-checkbox>
    <fk-checkbox :model-value="checked2">binding value2</fk-checkbox>
    <fk-checkbox :default-checked="true">uncontrolled state</fk-checkbox>
  </fk-space>
  <div :style="{ marginTop: '20px' }">
    <fk-button type="primary" @click="handleSetCheck">
      {{ checked2 ? 'uncheck' : 'check' }} value2
    </fk-button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checked1 = ref(false);
    const checked2 = ref(false);

    const handleSetCheck = () => {
      checked2.value = !checked2.value;
    };

    return {
      checked1,
      checked2,
      handleSetCheck,
    };
  },
};
</script>

禁用状态 ​

禁用复选框。

代码事例
vue
<template>
  <fk-space size="large">
    <fk-checkbox value="1" disabled>Disabled Option 1</fk-checkbox>
    <fk-checkbox :default-checked="true" disabled>Disabled Option 2</fk-checkbox>
  </fk-space>
</template>

复选框组 ​

通过 <fk-checkbox-group> 组件展示复选框组。设置 direction="vertical" 可以展示竖向的复选框组。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-checkbox-group :default-value="['1']">
      <fk-checkbox value="1">Option 1</fk-checkbox>
      <fk-checkbox value="2">Option 2</fk-checkbox>
      <fk-checkbox value="3">Option 3</fk-checkbox>
    </fk-checkbox-group>
    <fk-checkbox-group direction="vertical">
      <fk-checkbox value="1">Option 1</fk-checkbox>
      <fk-checkbox value="2">Option 2</fk-checkbox>
      <fk-checkbox value="3">Option 3</fk-checkbox>
    </fk-checkbox-group>
  </fk-space>
</template>

复选框组选项 ​

fk-checkbox-group 通过 options 属性设置子元素

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-checkbox-group v-model="value1" :options="plainOptions" />
    <fk-checkbox-group v-model="value2" :options="options" />
    <fk-checkbox-group v-model="value2" :options="options">
      <template #label="{ data }">
        <fk-tag>{{ data.label }}</fk-tag>
      </template>
    </fk-checkbox-group>
  </fk-space>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value1 = ref(['Plain 1']);
    const plainOptions = ['Plain 1', 'Plain 2', 'Plain 3'];

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

    return {
      plainOptions,
      options,
      value1,
      value2,
    };
  },
};
</script>

限制可勾选数量 ​

通过设置 max 限制最多可被勾选的项目数。

代码事例
vue
<template>
  <fk-space direction="vertical" size="large">
    <fk-checkbox-group v-model="value1" :max="2" :options="plainOptions" />
    <fk-checkbox-group :max="2" :default-value="['1']">
      <fk-checkbox value="1" disabled>Option 1</fk-checkbox>
      <fk-checkbox value="2">Option 2</fk-checkbox>
      <fk-checkbox value="3">Option 3</fk-checkbox>
      <fk-checkbox value="4">Option 4</fk-checkbox>
    </fk-checkbox-group>
  </fk-space>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value1 = ref(['Plain 1']);
    const plainOptions = ['Plain 1', 'Plain 2', 'Plain 3', 'Plain 4'];

    return {
      plainOptions,
      value1,
    };
  },
};
</script>

全选 ​

在实现全选的功能时，可以通过 indeterminate 属性展示半选效果。

代码事例
vue
<template>
  <fk-space direction="vertical">
    <fk-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll">Check All
    </fk-checkbox>
    <fk-checkbox-group v-model="data" @change="handleChange">
      <fk-checkbox value="1">Option 1</fk-checkbox>
      <fk-checkbox value="2">Option 2</fk-checkbox>
      <fk-checkbox value="3">Option 3</fk-checkbox>
    </fk-checkbox-group>
  </fk-space>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const indeterminate = ref(false)
    const checkedAll = ref(false)
    const data = ref([])

    const handleChangeAll = (value) => {
      indeterminate.value = false;
      if (value) {
        checkedAll.value = true;
        data.value = ['1', '2', '3']
      } else {
        checkedAll.value = false;
        data.value = []
      }
    }

    const handleChange = (values) => {
      if (values.length === 3) {
        checkedAll.value = true
        indeterminate.value = false;
      } else if (values.length === 0) {
        checkedAll.value = false
        indeterminate.value = false;
      } else {
        checkedAll.value = false
        indeterminate.value = true;
      }
    }

    return {
      indeterminate,
      checkedAll,
      data,
      handleChangeAll,
      handleChange
    }
  },
}
</script>

布局 ​

使用 <fk-checkbox-group> 传入 <fk-checkbox>，配合 <fk-grid> 组件实现灵活的布局。

代码事例
vue
<template>
  <fk-checkbox-group v-model="checkedValue">
    <fk-grid :cols="3" :col-gap="24" :row-gap="16">
      <fk-grid-item>
        <fk-checkbox value="1">Option 1</fk-checkbox>
      </fk-grid-item>
      <fk-grid-item>
        <fk-checkbox value="2" disabled>Option 2</fk-checkbox>
      </fk-grid-item>
      <fk-grid-item>
        <fk-checkbox value="3">Option 3</fk-checkbox>
      </fk-grid-item>
      <fk-grid-item>
        <fk-checkbox value="4">Option 4</fk-checkbox>
      </fk-grid-item>
      <fk-grid-item>
        <fk-checkbox value="5">Option 5</fk-checkbox>
      </fk-grid-item>
    </fk-grid>
  </fk-checkbox-group>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const checkedValue = ref(['1', '2']);

    return {
      checkedValue,
    };
  },
};
</script>

自定义复选框 ​

使用 #checkbox 插槽自定义复选框的展示

代码事例
vue
<template>
  <fk-checkbox-group :default-value="['1']">
    <fk-checkbox value="1">
      <template #checkbox="{ checked }">
        <fk-tag :checked="checked" checkable>This is a tag checkbox 1</fk-tag>
      </template>
    </fk-checkbox>
    <fk-checkbox value="2">
      <template #checkbox="{ checked }">
        <fk-tag :checked="checked" checkable>This is a tag checkbox 2</fk-tag>
      </template>
    </fk-checkbox>
    <fk-checkbox value="3">
      <template #checkbox="{ checked }">
        <fk-tag :checked="checked" checkable>This is a tag checkbox 3</fk-tag>
      </template>
    </fk-checkbox>
  </fk-checkbox-group>

  <div :style="{ marginTop: '20px' }">
    <fk-checkbox-group :default-value="[1]">
      <template v-for="item in 2" :key="item">
        <fk-checkbox :value="item">
          <template #checkbox="{ checked }">
            <fk-space
              align="start"
              class="custom-checkbox-card"
              :class="{ 'custom-checkbox-card-checked': checked }"
            >
              <div className="custom-checkbox-card-mask">
                <div className="custom-checkbox-card-mask-dot" />
              </div>
              <div>
                <div className="custom-checkbox-card-title">
                  Checkbox Card {{ item }}
                </div>
                <fk-typography-text type="secondary">
                  this is a text
                </fk-typography-text>
              </div>
            </fk-space>
          </template>
        </fk-checkbox>
      </template>
    </fk-checkbox-group>
  </div>
</template>

<style scoped>
.custom-checkbox-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  width: 250px;
  box-sizing: border-box;
}

.custom-checkbox-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-checkbox-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.custom-checkbox-card-title {
  color: var(--color-text-1);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.custom-checkbox-card:hover,
.custom-checkbox-card-checked,
.custom-checkbox-card:hover .custom-checkbox-card-mask,
.custom-checkbox-card-checked .custom-checkbox-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-checkbox-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-checkbox-card:hover .custom-checkbox-card-title,
.custom-checkbox-card-checked .custom-checkbox-card-title {
  color: rgb(var(--primary-6));
}

.custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>

API ​

<checkbox> Props ​

参数名描述类型默认值
model-value (v-model)绑定值boolean | Array<string | number | boolean>-
default-checked默认是否选中（非受控状态）booleanfalse
value选项的 valuestring|number|boolean-
disabled是否禁用booleanfalse
indeterminate是否为半选状态booleanfalse

<checkbox> Events ​

事件名描述参数
change值改变时触发value: boolean | (string | number | boolean)[]
ev: Event

<checkbox> Slots ​

插槽名描述参数版本
checkbox自定义复选框checked: boolean
disabled: boolean		1.0.0

<checkbox-group> Props ​

参数名描述类型默认值版本
model-value (v-model)绑定值string | number | boolean | Array<string | number | boolean>-
default-value默认值（非受控状态）Array<string | number | boolean> | string | number | boolean[]
max支持最多选中的数量number-1.0.0
options选项Array<string | number | CheckboxOption>-1.0.0
direction复选框的排列方向Direction'horizontal'
disabled是否禁用booleanfalse
multiple是否多选booleantrue

<checkbox-group> Events ​

事件名描述参数
change值改变时触发value: (string | number | boolean)[]
ev: Event

<checkbox-group> Slots ​

插槽名描述参数版本
checkbox自定义复选框checked: boolean
disabled: boolean		1.0.0
labelcheckbox 文案内容data: CheckboxOption1.0.0

CheckboxOption ​

参数名描述类型默认值
label文案RenderContent-
value选项的 valuestring | number-
disabled是否禁用booleanfalse
indeterminate是否为半选状态booleanfalse

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team