lh-mobile/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;
		margin: 15rpx 0;
		border-radius: 10rpx;

		.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>