更新记录

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

样式修改

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

master

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

master

平台兼容性

uni-app(4.13)

其他

安装

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

组件关联说明

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

• 代码演示

基本用法

• 使用组件代码如下：

<template>
    <view class="page-view">
        <xf-singlebox-card v-model:value="selectedCode1" @selector="selector" :dataList="dataList1"></xf-singlebox-card>

        <xf-singlebox-card customClass="b-mt16" v-model:value="selectedCode2" @selector="selector"
            :dataList="dataList2"></xf-singlebox-card>

        <xf-singlebox-card customClass="b-mt16" :required="false" v-model:value="selectedCode3" layout='wrap'
            @selector="selector" :dataList="dataList3"></xf-singlebox-card>
    </view>
</template>

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

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

    const selectedCode1 = ref(null)
    const selectedCode2 = ref(null)
    const selectedCode3 = ref(null)

    const dataList1 = [{ id: 1, name: '字段名称' }, { id: 2, 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: '字段名称' }]

    //选择后的回调返回一个对象{id:,name:}
    const selector = (e) => {
        console.log(e)
    }
</script>

API

Props

事件 Emits