card-wx-user/components/thorui/tui-divider/tui-divider.vue

<template>
	<view class="tui-divider" :style="{ height: height + 'rpx' }">
		<view class="tui-divider-line"
			:style="{ width: width, background: getBgColor(gradual, gradualColor, dividerColor) }"></view>
		<view class="tui-divider-text"
			:style="{ color: color, fontSize: size + 'rpx', lineHeight: size + 'rpx', backgroundColor: backgroundColor, fontWeight: bold ? 'bold' : 'normal' }">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'tuiDivider',
		props: {
			//divider占据高度
			height: {
				type: Number,
				default: 100
			},
			//divider宽度，可填写具体长度，如400rpx
			width: {
				type: String,
				default: '100%'
			},
			//divider颜色，如果为渐变线条，此属性失效
			dividerColor: {
				type: String,
				default: '#e5e5e5'
			},
			//文字颜色
			color: {
				type: String,
				default: '#999'
			},
			//文字大小 rpx
			size: {
				type: Number,
				default: 24
			},
			bold: {
				type: Boolean,
				default: false
			},
			//背景颜色，和当前页面背景色保持一致
			backgroundColor: {
				type: String,
				default: '#fafafa'
			},
			//是否为渐变线条，为true，divideColor失效
			gradual: {
				type: Boolean,
				default: false
			},
			//渐变色值，to right ，提供两个色值即可，由浅至深
			gradualColor: {
				type: Array,
				default: function() {
					return ['#eee', '#ccc'];
				}
			}
		},
		methods: {
			getBgColor: function(gradual, gradualColor, dividerColor) {
				let bgColor = dividerColor;
				if (gradual) {
					bgColor = 'linear-gradient(to right,' + gradualColor[0] + ',' + gradualColor[1] + ',' +
						gradualColor[1] + ',' + gradualColor[0] + ')';
				}
				return bgColor;
			}
		}
	};
</script>

<style scoped>
	.tui-divider {
		width: 100%;
		position: relative;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-divider-line {
		position: absolute;
		height: 1px;
		top: 50%;
		left: 50%;
		-webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0);
		transform: scaleY(0.5) translateX(-50%) translateZ(0);
	}

	.tui-divider-text {
		position: relative;
		text-align: center;
		padding: 0 18rpx;
		z-index: 1;
	}
</style>