更新记录

1.0.0（2024-06-17） 下载此版本

新增

平台兼容性

hbxw-info-item组件

介绍

资料/信息展示组件，常用于个人信息列表展示或者资料列表展示

使用示例

推荐先直接复制示例代码到工程中看效果再使用。

<template>
    <view class="page-container">
        <view class="data-card">
            <text class="data-title">个人信息</text>
            <hbxw-info-item title="姓名" content="张天师" />
            <hbxw-info-item title="个人评价" layout="column" :bottomBorder="false" content="还象调众总族民外程且极最走切文法见达位品组张民众响与主打群原例基表织今加。" />
            <hbxw-info-item title="标签" type="tag" layout="column" :content="['标签1','标签2','标签3','标签4','标签5','标签6','标签7']" />
            <hbxw-info-item title="持能证书" type="image" layout="column" :content="testImg0" />
            <hbxw-info-item title="持能证书" type="image" layout="column">
                <template #content>
                    <view class="img-wrap">
                        <hbxw-image 
                        width="128rpx" 
                        height="128rpx"
                        class="img-item"
                        :priviewList="testImg"
                        :previewIndex="index" 
                        :src="image"
                        :key="index"
                        v-for="(image, index) in testImg" 
                    />
                    </view>
                </template>
            </hbxw-info-item>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                testImg0: [
                    'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE1',
                    'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE2',
                    'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE3'
                ],
                testImg: [
                    'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE1',
                    'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE2',
                    'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE3',
                    'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE3',
                    'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE3',
                    'https://placehold.jp/999999/ff4400/300x300.png?text=EXAMPLE3',
                ]
            }
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
.page-container{
    overflow-y: auto;
}
.data-card{
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx 32rpx 8rpx;
}
.data-title{
 font-size: 36rpx;
 padding-bottom: 16rpx;
 font-weight: 700;
 color: #111;
}
.img-wrap{
    display: flex;
    flex-wrap: wrap;
}
.img-item{
    margin-right: auto;
    margin-bottom: 10rpx;
    &:nth-of-type(5n) {
        margin-right: 0;
    }
}
</style>

注：默认的图片展示是一行显示二个，图片宽是332 * 226，如果你对图片列表或者content展示内容自定义要求高可以通过content具名插槽来实现你的定制化需求

API

Props

注：因图片展示依赖我的另一个组件hbxw-image，在使用前在hbxw-info-item目录上鼠标右击-安装插件三方依赖再使用