华玥组件库

中文

English

中文

English

Appearance

Checkbox 复选框组件 ​

复选框组件一般用于需要多个选择的场景，该组件功能完整，使用方便

📌平台差异说明 ​

APP(vue)H5微信小程序支付宝小程序
✔✔✔✔

🏯基本使用示例 ​

html
<template>
    <!-- 全局使用 -->
    <hy-checkbox v-model="value" :columns="columns"></hy-checkbox>

    <!-- 分开式组件 -->
    <hy-checkbox-group v-model="value2">
        <hy-checkbox-item value="f" label="法拉利" :checked="true"></hy-checkbox-item>
        <hy-checkbox-item value="l" label="兰博基尼"></hy-checkbox-item>
        <hy-checkbox-item value="b" label="布加迪"></hy-checkbox-item>
        <hy-checkbox-item value="a" label="阿斯顿马丁"></hy-checkbox-item>
    </hy-checkbox-group>
</template>

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

    const columns = [
        {
            label: "苹果",
            value: "apply",
        },
        {
            label: "香蕉",
            value: "banana",
        },
    ];
    const value = ref(["apply"]);
    const value2 = ref([""]);
</script>

自定义columns键 ​

html
<template>
    <hy-checkbox
            v-model="value"
            :columns="columns"
            :fieldNames="fieldNames"
    ></hy-checkbox>
</template>

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

    const columns = [
        {
            name: "苹果",
            value_1: "apply",
        },
        {
            name: "香蕉",
            value_1: "banana",
        },
    ];
    const value = ref([]);
    const fieldNames = ref({
        label: "name",
        value: "value_1",
        checked: "checked",
    });
</script>

单独一个 ​

html
<template>
  <hy-checkbox v-model="value" :columns="columns"></hy-checkbox>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  const value = ref(false);

  const columns = [
    {
      name: "记住密码",
      value: 1,
    },
  ];
</script>

自定义形状 ​

可以通过设置shape为square或者circle，将复选框设置为方形或者圆形

html
<hy-checkbox v-model="value" :columns="columns" shape="square"></hy-checkbox>
<hy-checkbox v-model="value" :columns="columns" shape="circle"></hy-checkbox>

自定义颜色 ​

html
<hy-checkbox v-model="value" :columns="columns" activeColor="red"></hy-checkbox>

排列形式 ​

可以通过设置placement为row或者column，将复选框设置为横向排列或者竖向排列

html
<hy-checkbox v-model="value" :columns="columns" placement="row"></hy-checkbox>
<hy-checkbox
  v-model="value"
  :columns="columns"
  placement="column"
></hy-checkbox>

横向两端排列形式 ​

可以通过设置iconPlacement为left或者right，将复选框勾选图标的对齐设置为左对齐或者右对齐

html
<hy-checkbox
  v-model="value"
  :columns="columns"
  iconPlacement="right"
  placement="row"
></hy-checkbox>
<hy-checkbox
  v-model="value"
  :columns="columns"
  iconPlacement="left"
  placement="row"
></hy-checkbox>

禁用 ​

html
<template>
    <!-- 全部禁用 -->
    <hy-checkbox v-model="value" :columns="columns" disabled></hy-checkbox>
</template>

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

    const columns = [
        {
            label: "苹果",
            value: "apply",
            disabled: true, // 禁用单个
        },
        {
            label: "香蕉",
            value: "banana",
        },
    ];
    const value = ref(["apply"]);
</script>

插槽 ​

  • label：自定义label文本,传值为label
  • icon：自定义选项框里icon,传值为iconColor和iconSize
html
<template>
    <hy-checkbox v-model="value" :columns="columns">
        <template #label="{ label }">
            <view>{{label}}</view>
        </template>
        <template #icon="{ iconColor, iconSize }">
            <view>{{iconColor}}</view>
            <view>{{iconSize}}</view>
        </template>
    </hy-checkbox>
</template>

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

    const columns = [
        {
            label: "苹果",
            value: "apply",
        },
        {
            label: "香蕉",
            value: "banana",
        },
    ];
    const value = ref(["apply"]);
</script>

API ​

Checkbox Props ​

参数说明类型默认值
v-model双向绑定值，数组类型(string|number)[] |boolean-
columns接收数组值array-
fieldNames自定义接收columns的键object{label: "label",value: "value",checked: "checked"}
shape复选框形状[1]circle|squaresquare
size复选框大小[2]small|medium|large |string|numbermedium
disabled是否禁用booleanfalse
activeColor选中状态下的颜色string-
inactiveColor未选中的颜色string#c8c9cc
iconSize图标的大小，数值默认单位pxstring|number20
iconColor图标颜色string-
labelSizelabel的字体大小，数值默认单位pxstring|number-
labelColorlabel的颜色string-
iconPlacement勾选图标的对齐方式left|rightleft
borderBottom竖向配列时，是否显示下划线booleanfalse
labelDisabled是否禁止点击提示语选中复选框booleanfalse
placement布局方式[3]row|columnrow
customStyle定义需要用到的外部样式CSSProperties-

CheckboxGroup Props ​

参数说明类型默认值
v-model双向绑定值，数组类型(string|number)[]|boolean-
shape复选框形状[1:1]circle|squaresquare
size复选框大小[2:1]small|medium|large|string|numbermedium
disabled是否禁用booleanfalse
activeColor选中状态下的颜色string-
inactiveColor未选中的颜色string#c8c9cc
iconSize图标的大小，单位pxstring|number20
iconColor图标颜色string-
labelSizelabel的字体大小，px单位string|number-
labelColorlabel的颜色string-
iconPlacement勾选图标的对齐方式left|rightleft
borderBottom竖向配列时，是否显示下划线booleanfalse
labelDisabled是否禁止点击提示语选中复选框booleanfalse
placement布局方式[3:1]row|columnrow
customStyle定义需要用到的外部样式CSSProperties-

CheckboxItem Props ​

参数说明类型默认值
value绑定值string-
labellabel提示文字string-
checked是否默认选中booleanfalse
disabled是否禁用booleanfalse

columns ​

参数说明类型默认值
label显示文本内容string-
value值string-
checked是否选中boolean-
disabled是否禁用boolean-

API ​

参数说明类型默认值
label自定义columns的文本键stringlabel
value自定义columns的值键stringvalue
checked自定义columns的选中键stringchecked

CheckboxItem Events ​

事件名说明回调参数
change任一个checkbox状态发生变化时触发，回调为一个对象detail = array( [元素为被选中的checkbox的value] )

CheckboxItem Slots ​

插槽名说明传值
icon自定义icon内容iconColor | iconSize
label自定义label内容record
07:02

  1. circle：两边为半圆；square：方形带圆角 ↩︎ ↩︎

  2. normal：默认尺寸；large：大尺寸； small：小尺寸； ↩︎ ↩︎

  3. row: 横向；column：纵向 ↩︎ ↩︎