fs-uni-template/components/fs-divider/fs-divider.vue

<template>
	<view class="fs-divider">
		<view class="fs-divider-line" :class="['bg-' + (lineColorType || colorType)]" :style="lineStyle"></view>
		<view class="fs-divider-content" :class="textColorType || colorType" :style="{ color: textColor || color }">
			<slot></slot>
		</view>
		<view class="fs-divider-line" :class="['bg-' + (lineColorType || colorType)]" :style="lineStyle"></view>
	</view>
</template>

<script>
/**
 * 分割线组件
 * @description 分割线组件
 * @property {String} lineWidth 分割线宽度
 * @property {String} lineHeight 分割线高度
 * @property {String} lineColor 分割线颜色(优先级高于color)
 * @property {String} lineColorType = [primary | danger | warning | info | success] 分割线颜色类型(优先级高于colorType)
 * @property {String} textColor 文字颜色(优先级高于color)
 * @property {String} textColorType = [primary | danger | warning | info | success] 文字颜色类型(优先级高于color)
 * @property {String} color 分割线、文字颜色
 * @property {String} colorType = [primary | danger | warning | info | success] 分割线、文字颜色类型
 */
export default {
	name: 'fs-divider'
}
</script>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	lineWidth: {
		type: String,
		default: '150rpx'
	},
	lineHeight: {
		type: String,
		default: '2rpx'
	},
	lineColor: String,
	lineColorType: {
		type: String,
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger', 'default'].includes(value)
		}
	},
	textColor: String,
	textColorType: {
		type: String,
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger', 'default'].includes(value)
		}
	},
	color: String,
	colorType: {
		type: String,
		default: 'default',
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger', 'default'].includes(value)
		}
	}
})

const lineStyle = computed(() => {
	return `
		width:${props.lineWidth};
		height:${props.lineHeight};
		backgroundColor:${props.lineColor || props.color};
		`
})
</script>

<style lang="scss" scoped>
.fs-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;

	&-content {
		padding: 0 20rpx;
		white-space: nowrap;
	}
}
</style>