更新记录

1.0.0.1（2025-12-29） 下载此版本

master

1.0.0（2025-12-29） 下载此版本

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-multibox-carduni_modules版本的即可，无需import

组件关联说明

• xf-scss辅助样式;
• xf-ts辅助样式;
• xf-fm-title;

• 代码演示

基本用法

• 使用组件代码如下：

    <view>
    <xf-multibox-card v-model:value="selectedCodes1" :dataList="dataList1"></xf-multibox-card>

    <xf-multibox-card customClass="b-mt16" v-model:value="selectedCodes2" :dataList="dataList2"></xf-multibox-card>

    <xf-multibox-card customClass="b-mt16" layout="wrap" v-model:value="selectedCodes3"
        :dataList="dataList3"></xf-multibox-card>

    <xf-multibox-card customClass="b-mt16" :itemCount="4" v-model:value="selectedCodes4"
        :dataList="dataList4"></xf-multibox-card>
</view>

• ts 基础用法：dataList的数据结构

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

    const selectedCodes1 = ref(null)
    const selectedCodes2 = ref(null)
    const selectedCodes3 = ref(null)
    const selectedCodes4 = ref(null)
    const dataList1 = [{ id: 0, name: '字段名称' }, { id: 1, name: '字段名称' }]

    const dataList2 = [{ id: 0, name: '字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称' }, { id: 1, name: '字段名称' }, { id: 2, name: '字段名称字段名称字段名称字段名称' }, { id: 3, name: '字段名称' }, { id: 4, name: '字段名称' }, { id: 5, name: '字段名称' }]

    const dataList3 = [{ id: 0, name: '字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称字段名称' }, { id: 1, name: '字段名称' }, { id: 2, name: '字段名称字段名称字段名称字段名称' }, { id: 3, name: '字段名称' }, { id: 4, name: '字段名称' }, { id: 5, name: '字段名称' }]

    const dataList4 = [{ id: 0, name: '字段名称' }, { id: 1, name: '字段名称' }, { id: 2, name: '字段名称' }, { id: 3, name: '字段名称' }, { id: 4, name: '字段名称' }, { id: 5, name: '字段名称' }]

</script>

API

Props

事件 Emits