v1.0

uni_modules/uv-divider/components/uv-divider/props.js

@@ -0,0 +1,45 @@
+export default {
+	props: {
+		// 是否虚线
+		dashed: {
+			type: Boolean,
+			default: false
+		},
+		// 是否细线
+		hairline: {
+			type: Boolean,
+			default: true
+		},
+		// 是否以点替代文字，优先于text字段起作用
+		dot: {
+			type: Boolean,
+			default: false
+		},
+		// 内容文本的位置，left-左边，center-中间，right-右边
+		textPosition: {
+			type: String,
+			default: 'center'
+		},
+		// 文本内容
+		text: {
+			type: [String, Number],
+			default: ''
+		},
+		// 文本大小
+		textSize: {
+			type: [String, Number],
+			default: 14
+		},
+		// 文本颜色
+		textColor: {
+			type: String,
+			default: '#909399'
+		},
+		// 线条颜色
+		lineColor: {
+			type: String,
+			default: '#dcdfe6'
+		},
+		...uni.$uv?.props?.divider
+	}
+}

uni_modules/uv-divider/components/uv-divider/uv-divider.vue

@@ -0,0 +1,113 @@
+<template>
+	<view 
+		class="uv-divider"
+		:style="[$uv.addStyle(customStyle)]"
+		@tap="click"
+		>
+		<uv-line 
+			:color="lineColor"
+			:customStyle="leftLineStyle"
+			:hairline="hairline"
+			:dashed="dashed"></uv-line>
+		<text 
+			v-if="dot"
+			class="uv-divider__dot"
+		>●</text>
+		<text 
+			v-else-if="text"
+			class="uv-divider__text"
+			:style="[textStyle]"
+		>{{text}}</text>
+		<uv-line 
+			:color="lineColor"
+			:customStyle="rightLineStyle"
+			:hairline="hairline"
+			:dashed="dashed"
+		></uv-line>
+	</view>
+</template>
+<script>
+	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
+	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
+	import props from './props.js';
+	/**
+	 * divider 分割线
+	 * @description 区隔内容的分割线，一般用于页面底部"没有更多"的提示。
+	 * @tutorial https://www.uvui.cn/components/divider.html
+	 * @property {Boolean}			dashed			是否虚线 （默认 false ）
+	 * @property {Boolean}			hairline		是否细线 （默认  true ）
+	 * @property {Boolean}			dot				是否以点替代文字，优先于text字段起作用 （默认 false ）
+	 * @property {String}			textPosition	内容文本的位置，left-左边，center-中间，right-右边 （默认 'center' ）
+	 * @property {String | Number}	text			文本内容
+	 * @property {String | Number}	textSize		文本大小 （默认 14）
+	 * @property {String}			textColor		文本颜色 （默认 '#909399' ）
+	 * @property {String}			lineColor		线条颜色 （默认 '#dcdfe6' ）
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 *
+	 * @event {Function}	click	divider组件被点击时触发
+	 * @example <uv-divider :color="color">锦瑟无端五十弦</uv-divider>
+	 */
+	export default {
+		name: 'uv-divider',
+		mixins: [mpMixin, mixin, props],
+		emits: ['click'],
+		computed: {
+			textStyle() {
+				const style = {}
+				style.fontSize = this.$uv.addUnit(this.textSize)
+				style.color = this.textColor
+				return style
+			},
+			// 左边线条的的样式
+			leftLineStyle() {
+				const style = {}
+				// 如果是在左边，设置左边的宽度为固定值
+				if (this.textPosition === 'left') {
+					style.width = '80rpx'
+				} else {
+					style.flex = 1
+				}
+				return style
+			},
+			// 右边线条的的样式
+			rightLineStyle() {
+				const style = {}
+				// 如果是在右边，设置右边的宽度为固定值
+				if (this.textPosition === 'right') {
+					style.width = '80rpx'
+				} else {
+					style.flex = 1
+				}
+				return style
+			}
+		},
+		methods: {
+			// divider组件被点击时触发
+			click() {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
+	$uv-divider-margin: 15px 0 !default;
+	$uv-divider-text-margin: 0 15px !default;
+	$uv-divider-dot-font-size: 12px !default;
+	$uv-divider-dot-margin: 0 12px !default;
+	$uv-divider-dot-color: #c0c4cc !default;
+	.uv-divider {
+		@include flex;
+		flex-direction: row;
+		align-items: center;
+		margin: $uv-divider-margin;
+		&__text {
+			margin: $uv-divider-text-margin;
+		}
+		&__dot {
+			font-size: $uv-divider-dot-font-size;
+			margin: $uv-divider-dot-margin;
+			color: $uv-divider-dot-color;
+		}
+	}
+</style>