pnkx-admin-mongo/pnkx-uniapp/components/uni-section/uni-section.vue

<template>
    <view class="uni-section">
        <view class="uni-section-header" @click="onClick">
            <view class="uni-section-header__decoration" v-if="type" :class="type"/>
            <slot v-else name="decoration"></slot>

            <view class="uni-section-header__content">
                <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title"
                      :class="{'distraction':!subTitle}">{{ title }}
                </text>
                <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}"
                      class="uni-section-header__content-sub">{{ subTitle }}
                </text>
            </view>

            <view class="uni-section-header__slot-right">
                <slot name="right"></slot>
            </view>
        </view>

        <view class="uni-section-content" :style="{padding: _padding}">
            <slot/>
        </view>
    </view>
</template>

<script>

    /**
     * Section 标题栏
     * @description 标题栏
     * @property {String} type = [line|circle|square] 标题装饰类型
     *    @value line 竖线
     *    @value circle 圆形
     *    @value square 正方形
     * @property {String} title 主标题
     * @property {String} titleFontSize 主标题字体大小
     * @property {String} titleColor 主标题字体颜色
     * @property {String} subTitle 副标题
     * @property {String} subTitleFontSize 副标题字体大小
     * @property {String} subTitleColor 副标题字体颜色
     * @property {String} padding 默认插槽 padding
     */

    export default {
        name: 'UniSection',
        emits: ['click'],
        props: {
            type: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                required: true,
                default: ''
            },
            titleFontSize: {
                type: String,
                default: '14px'
            },
            titleColor: {
                type: String,
                default: '#333'
            },
            subTitle: {
                type: String,
                default: ''
            },
            subTitleFontSize: {
                type: String,
                default: '12px'
            },
            subTitleColor: {
                type: String,
                default: '#999'
            },
            padding: {
                type: [Boolean, String],
                default: false
            }
        },
        computed: {
            _padding() {
                if (typeof this.padding === 'string') {
                    return this.padding
                }

                return this.padding ? '10px' : ''
            }
        },
        watch: {
            title(newVal) {
                if (uni.report && newVal !== '') {
                    uni.report('title', newVal)
                }
            }
        },
        methods: {
            onClick() {
                this.$emit('click')
            }
        }
    }
</script>
<style lang="scss">
    $uni-primary: #2979ff !default;

    .uni-section {
        background-color: #fff;

        .uni-section-header {
            position: relative;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: row;
            align-items: center;
            padding: 12px 10px;
            font-weight: normal;

            &__decoration {
                margin-right: 6px;
                background-color: $uni-primary;

                &.line {
                    width: 4px;
                    height: 12px;
                    border-radius: 10px;
                }

                &.circle {
                    width: 8px;
                    height: 8px;
                    border-top-right-radius: 50px;
                    border-top-left-radius: 50px;
                    border-bottom-left-radius: 50px;
                    border-bottom-right-radius: 50px;
                }

                &.square {
                    width: 8px;
                    height: 8px;
                }
            }

            &__content {
                /* #ifndef APP-NVUE */
                display: flex;
                /* #endif */
                flex-direction: column;
                flex: 1;
                color: #333;

                .distraction {
                    flex-direction: row;
                    align-items: center;
                }

                &-sub {
                    margin-top: 2px;
                }
            }

            &__slot-right {
                font-size: 14px;
            }
        }

        .uni-section-content {
            font-size: 14px;
        }
    }
</style>