1

uni_modules/uview-next/components/u-divider/props.js

@@ -0,0 +1,49 @@
+export default {
+    props: {
+        // 是否虚线
+        dashed: {
+            type: Boolean,
+            default: ()=> uni.$u.props.divider.dashed
+        },
+        // 是否细线
+        hairline: {
+            type: Boolean,
+            default: ()=> uni.$u.props.divider.hairline
+        },
+        // 是否以点替代文字，优先于text字段起作用
+        dot: {
+            type: Boolean,
+            default: ()=> uni.$u.props.divider.dot
+        },
+        // 内容文本的位置，left-左边，center-中间，right-右边
+        position: {
+            type: String,
+            default: ()=> uni.$u.props.divider.position
+        },
+        // 文本内容
+        text: {
+            type: [String, Number],
+            default: ()=> uni.$u.props.divider.text
+        },
+        // 文本大小
+        size: {
+            type: [String, Number],
+            default: ()=> uni.$u.props.divider.size
+        },
+        // 文本颜色
+        color: {
+            type: String,
+            default: ()=> uni.$u.props.divider.color
+        },
+        // 是否加粗
+        bold: {
+            type: Boolean,
+            default: ()=> uni.$u.props.divider.bold
+        },
+        // 线条颜色
+        lineColor: {
+            type: String,
+            default: ()=> uni.$u.props.divider.lineColor
+        }
+    }
+}

uni_modules/uview-next/components/u-divider/u-divider.vue

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