v1.0

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

@@ -0,0 +1,25 @@
+export default {
+	props: {
+		// 背景颜色（默认transparent）
+		bgColor: {
+			type: String,
+			default: 'transparent'
+		},
+		// 分割槽高度，单位px（默认20）
+		height: {
+			type: [String, Number],
+			default: 20
+		},
+		// 与上一个组件的距离
+		marginTop: {
+			type: [String, Number],
+			default: 0
+		},
+		// 与下一个组件的距离
+		marginBottom: {
+			type: [String, Number],
+			default: 0
+		},
+		...uni.$uv?.props?.gap
+	}
+}

uni_modules/uv-gap/components/uv-gap/uv-gap.vue

@@ -0,0 +1,36 @@
+<template>
+	<view class="uv-gap" :style="[gapStyle]"></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';
+	/**
+	 * gap 间隔槽
+	 * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+	 * @tutorial https://www.uvui.cn/components/gap.html
+	 * @property {String}			bgColor			背景颜色 （默认 'transparent' ）
+	 * @property {String | Number}	height			分割槽高度，单位px （默认 20 ）
+	 * @property {String | Number}	marginTop		与前一个组件的距离，单位px（ 默认 0 ）
+	 * @property {String | Number}	marginBottom	与后一个组件的距离，单位px （默认 0 ）
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * 
+	 * @example <uv-gap height="80" bg-color="#bbb"></uv-gap>
+	 */
+	export default {
+		name: "uv-gap",
+		mixins: [mpMixin, mixin,props],
+		computed: {
+			gapStyle() {
+				const style = {
+					backgroundColor: this.bgColor,
+					height: this.$uv.addUnit(this.height),
+					marginTop: this.$uv.addUnit(this.marginTop),
+					marginBottom: this.$uv.addUnit(this.marginBottom),
+				}
+				return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
+			}
+		}
+	};
+</script>