Initial commit

uview-plus/components/u-gap/gap.js

@@ -0,0 +1,19 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:05:25
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/gap.js
+ */
+export default {
+    // gap组件
+    gap: {
+        bgColor: 'transparent',
+        height: 20,
+        marginTop: 0,
+        marginBottom: 0,
+        customStyle: {}
+    }
+}

uview-plus/components/u-gap/props.js

@@ -0,0 +1,26 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 背景颜色（默认transparent）
+        bgColor: {
+            type: String,
+            default: () => defProps.gap.bgColor
+        },
+        // 分割槽高度，单位px（默认30）
+        height: {
+            type: [String, Number],
+            default: () => defProps.gap.height
+        },
+        // 与上一个组件的距离
+        marginTop: {
+            type: [String, Number],
+            default: () => defProps.gap.marginTop
+        },
+        // 与下一个组件的距离
+        marginBottom: {
+            type: [String, Number],
+            default: () => defProps.gap.marginBottom
+        }
+    }
+})

uview-plus/components/u-gap/u-gap.vue

@@ -0,0 +1,41 @@
+<template>
+	<view class="u-gap" :style="[gapStyle]"></view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addStyle, addUnit, deepMerge } from '../../libs/function/index.js';
+	/**
+	 * gap 间隔槽
+	 * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+	 * @tutorial https://ijry.github.io/uview-plus/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 <u-gap height="80" bg-color="#bbb"></u-gap>
+	 */
+	export default {
+		name: "u-gap",
+		mixins: [mpMixin, mixin, props],
+		computed: {
+			gapStyle() {
+				const style = {
+					backgroundColor: this.bgColor,
+					height: addUnit(this.height),
+					marginTop: addUnit(this.marginTop),
+					marginBottom: addUnit(this.marginBottom),
+				}
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+</style>