更新记录

1.0.1（2024-08-31） 下载此版本

示例代码

1.0.0（2024-05-23） 下载此版本

初始化

平台兼容性

jiangcs-card-list

卡片列表

示例代码

<template>
    <jiangcs-card-list :dataArr="dataArr" :gap="4">
        <template #title-prefix="{item}">
            // 定义标题前缀
            @
        </template>
        <template #extra="{item}">
            // 定义右上角操作
            <button @click="handleClick('edit')">修改</button>
        </template>
        <template #remark-prefix="{item}">
            // 定义备注前缀
            %
        </template>
        <template #footer="{item}">
            // 一般定义操作相关
            <button @click="handleClick('enter')">进入</button>
        </template>
    </jiangcs-card-list>
</template>

    const dataArr = [
        {
            id: 1,
            title: '测试',
            logo: '',
            contentArr: [{
                label: '类型',
                value: '鸡'
            }, {
                label: '棚舍数量',
                value: '80',
                unit: '间'
            },  {
                label: '规模',
                value: '',
                unit: '只'
            },{
                label: '联系人',
                value: '张三丰'
            }, {
                label: '联系方式',
                value: ''
            }],
            remark: '卿山清水倾天下'
        }
    ]
    const handleClick = (type) => {
        console.log('click', type)
    }

props定义

data-arr

数据数组

[{
    id: 1,
    title: '测试',
    logo: '',
    contentArr: [{
        label: '类型',
        value: '鸡'
    }, {
        label: '棚舍数量',
        value: '80',
        unit: '间'
    },  {
        label: '规模',
        value: '',
        unit: '只'
    },{
        label: '联系人',
        value: '张三丰'
    }, {
        label: '联系方式',
        value: ''
    }],
    remark: '卿山清水倾天下'
}]

gap

数据分割

数组按gap进行分组，换行显示

slot 定义

title-prefix

标题前缀插槽

<template #title-prefix="{item}">@</template>

extra

右上角插槽

<template #extra="{item}"><button>修改</button></template>

remark-prefix

备注前缀插槽

<template #remark-prefix="{item}">%</template>

footer

底部插槽

<template #footer="{item}"><button>进入</button></template>