Fusions

Appearance

Checkbox 复选框 ​

iPhone

此组件一般用于需要单个或多个选择的场景，同时可以配合表单组件 fu-form 使用。

平台差异说明 ​

APPH5微信小程序支付宝小程序···
√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

通过 list 属性后，组件会通过数据渲染出对应的内容，默认单选框。

  • multiple 属性设置为 true 时为多选框，false 时为单选框。
  • value/v-model 绑定一个变量，对应的 value 将会被选中。
html
<template>
    <view>
        <fu-checkbox v-model="value" :list="list" @change="handleChange"></fu-checkbox>
    </view>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    let value = ref(0);
    const list = reactive([
        { 
            text: '男', 
            value: 0 
        },
        { 
            text: '女', 
            value: 1 
        },
        { 
            text: '未知', 
            value: 2, 
            disabled: true 
        }
    ]);

    // methods方法
    const handleChange = (e) => {
        console.log(`e：${e}`);
    };
</script>

设置多选框 ​

通过 multiple 属性设置为 true，组件显示未多选框

需要注意 multiple="true" 时（多选），value/v-model 的值是 Array 类型

html
<template>
    <view>
        <fu-checkbox v-model="value" :list="list" multiple @change="handleChange"></fu-checkbox>
    </view>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    let value = ref([0, 2]);
    const list = reactive([
        { 
            text: '柠檬', 
            value: 0 
        },
        { 
            text: '橙子', 
            value: 1 
        },
        { 
            text: '香蕉', 
            value: 2
        }
    ]);

    // methods方法
    const handleChange = (e) => {
        console.log(`e：${e}`);
    };
</script>

设置最大最小值限制 ​

如果选中个数小于 min 属性设置的值，选中的内容将不可取消，只有当选中个数大于等于 min 且小于 max 时，才可取消选中

如果选中个数大于等于 max 属性设置的值，那么其他未选中的内容将不可选。

  • multiple 属性为 true 时，可以通过 min 和 max 属性设置最大最小值限制。
html
<template>
    <view>
        <fu-checkbox v-model="value" :list="list" min="1" max="2" multiple @change="handleChange"></fu-checkbox>
    </view>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    let value = ref([0, 2]);
    const list = reactive([
        { 
            text: '柠檬', 
            value: 0 
        },
        { 
            text: '橙子', 
            value: 1 
        },
        { 
            text: '香蕉', 
            value: 2
        }
    ]);

    // methods方法
    const handleChange = (e) => {
        console.log(`e：${e}`);
    };
</script>

设置禁用 ​

通过 disabled 属性设置禁用，禁用后无法点击，且内容不可选。

如果需要禁用某项，需要在 list 属性的数据源中添加 disabled 属性，而不是在组件中添加 disabled 属性。

html
<template>
    <view>
        <fu-checkbox v-model="value" :list="list" min="1" max="2" multiple @change="handleChange"></fu-checkbox>
    </view>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    let value = ref([0, 2]);
    const list = reactive([
        { 
            text: '柠檬', 
            value: 0 
        },
        { 
            text: '橙子', 
            value: 1 
        },
        { 
            text: '香蕉', 
            value: 2,
            // 禁用此项
            disabled: true
        }
    ]);

    // methods方法
    const handleChange = (e) => {
        console.log(`e：${e}`);
    };
</script>

自定义选中颜色 ​

  • 通过 activeColor 属性设置选中后的图标及边框颜色
  • 通过 activeTextColor 属性设置选中后的文字颜色，如果不设置默认同 activeColor 属性值，mode 属性设置为 tag 时，默认为白色。
html
<template>
    <view>
        <fu-checkbox v-model="value" :list="list" activeColor="red" activeTextColor="red" multiple @change="handleChange"></fu-checkbox>
    </view>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    let value = ref([0, 2]);
    const list = reactive([
        { 
            text: '柠檬', 
            value: 0 
        },
        { 
            text: '橙子', 
            value: 1 
        },
        { 
            text: '香蕉', 
            value: 2,
            // 禁用此项
            disabled: true
        }
    ]);

    // methods方法
    const handleChange = (e) => {
        console.log(`e：${e}`);
    };
</script>

更多模式 ​

通过 mode 属性设置显示模式，可选值：

  • default 默认模式，横排模式
  • list 列表模式，默认图标左侧显示，可以通过 iconPos 属性设置图标位置，可选值：left 左侧，right 右侧。
  • button 按钮模式
  • tag 标签模式
html
<template>
    <view>
        <!-- 默认 default 模式 -->
        <fu-checkbox v-model="value" :list="list" @change="handleChange"></fu-checkbox>

        <!-- 列表 list 模式，显示左侧图标 -->
        <fu-checkbox v-model="value" :list="list" mode="list" iconPos="left" @change="handleChange"></fu-checkbox>

        <!-- 列表 list 模式，显示右侧图标 -->
        <fu-checkbox v-model="value" :list="list" mode="list" iconPos="right" @change="handleChange"></fu-checkbox>

        <!-- 按钮 button 模式 -->
        <fu-checkbox v-model="value" :list="list" mode="button" @change="handleChange"></fu-checkbox>

        <!-- 标签 tag 模式 -->
        <fu-checkbox v-model="value" :list="list" mode="tag" @change="handleChange"></fu-checkbox>
    </view>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    let value = ref([0, 2]);
    const list = reactive([
        { 
            text: '柠檬', 
            value: 0 
        },
        { 
            text: '橙子', 
            value: 1 
        },
        { 
            text: '香蕉', 
            value: 2,
            // 禁用此项
            disabled: true
        }
    ]);

    // methods方法
    const handleChange = (e) => {
        console.log(`e：${e}`);
    };
</script>

API ​

Checkbox Props ​

属性名说明类型默认值可选值
value/v-model绑定选中值，multiple="true" 时为 Array 类型，否则为 String 或 Number 类型Array｜String｜Number--
list选项列表，格式为 [{ text: '选项1', value: 1 }, { text: '选项2', value: 2 }]Array--
mode显示模式，详见上方更多模式Stringdefault-
multiple是否多选Booleanfalsetrue
map字段映射，将text/value映射到数据中的其他字段Object{text:'text',value:'value'}-
min最小选中数，multiple="true" 时生效String｜Number--
max最大选中数，multiple="true" 时生效String｜Number--
wrap是否换行显示Booleanfalsetrue
disabled是否禁用全部checkboxBooleanfalsetrue
activeColor选中时的颜色String#2979ff-
shape图标形状，可选值为 square（方形）或 circle（圆形）Stringcirclesquare
highlight选中时，文本是否高亮Booleantruefalse
iconPosmode = list 列表模式下icon显示位置（默认 left）Stringleftright
activeTextColor选中时的文字颜色，如为空则自动显示String--

Checkbox Events ​

事件名说明回调参数
change选中状态改变时触发() => void