yshi/fuintUniapp/uview-ui/components/u-cell-group/u-cell-group.vue

<template>
    <view class="u-cell-box">
        <view class="u-cell-title" v-if="title" :style="[titleStyle]">
            {{title}}
        </view>
        <view class="u-cell-item-box" :class="{'u-border-bottom u-border-top': border}">
            <slot />
        </view>
    </view>
</template>

<script>
    /**
     * cellGroup 单元格父组件Group
     * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。搭配u-cell-item
     * @tutorial https://www.uviewui.com/components/cell.html
     * @property {String} title 分组标题
     * @property {Boolean} border 是否显示外边框（默认true）
     * @property {Object} title-style 分组标题的的样式，对象形式，如{'font-size': '24rpx'} 或 {'fontSize': '24rpx'}
     * @example <u-cell-group title="设置喜好">
     */
    export default {
        name: "u-cell-group",
        props: {
            // 分组标题
            title: {
                type: String,
                default: ''
            },
            // 是否显示分组list上下边框
            border: {
                type: Boolean,
                default: true
            },
            // 分组标题的样式，对象形式，注意驼峰属性写法
            // 类似 {'font-size': '24rpx'} 和 {'fontSize': '24rpx'}
            titleStyle: {
                type: Object,
                default () {
                    return {};
                }
            }
        },
        data() {
            return {
                index: 0,
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "../../libs/css/style.components.scss";
    
    .u-cell-box {
        width: 100%;
    }

    .u-cell-title {
        padding: 30rpx 32rpx 10rpx 32rpx;
        font-size: 30rpx;
        text-align: left;
        color: $u-tips-color;
    }

    .u-cell-item-box {
        background-color: #FFFFFF;
        flex-direction: row;
    }
</style>