看板

2026-03-25 14:54:15 +08:00
commit ab4646b43a
827 changed files with 123812 additions and 0 deletions
@@ -0,0 +1,20 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+import { baseProps } from '../common/props';
+
+/**
+ * u-gap 组件 Props 类型定义
+ * @description 间隔槽组件属性
+ */
+export const GapProps = {
+    ...baseProps,
+    /** 背景颜色 */
+    bgColor: { type: String, default: 'transparent' },
+    /** 高度 */
+    height: { type: [String, Number] as PropType<string | number>, default: 30 },
+    /** 与上一个组件的距离 */
+    marginTop: { type: [String, Number] as PropType<string | number>, default: 0 },
+    /** 与下一个组件的距离 */
+    marginBottom: { type: [String, Number] as PropType<string | number>, default: 0 }
+};
+
+export type GapProps = ExtractPropTypes<typeof GapProps>;
@@ -0,0 +1,50 @@
+<template>
+    <view class="u-gap" :style="$u.toStyle(gapStyle, customStyle)"></view>
+</template>
+
+<script lang="ts">
+export default {
+    name: 'u-gap',
+    options: {
+        addGlobalClass: true,
+        // #ifndef MP-TOUTIAO
+        virtualHost: true,
+        // #endif
+        styleIsolation: 'shared'
+    }
+};
+</script>
+
+<script setup lang="ts">
+import { GapProps } from './types';
+import { computed } from 'vue';
+import { $u } from '../../';
+
+/**
+ * gap 间隔槽
+ * @description 该组件一般用于内容块之间的用一个灰色块隔开的场景，方便用户风格统一，减少工作量
+ * @tutorial https://uviewpro.cn/zh/components/gap.html
+ * @property {String} bg-color 背景颜色（默认var(--u-bg-color)）
+ * @property {String Number} height 分割槽高度，单位rpx（默认30）
+ * @property {String Number} margin-top 与前一个组件的距离，单位rpx（默认0）
+ * @property {String Number} margin-bottom 与后一个组件的距离，单位rpx（0）
+ * @example <u-gap height="80" bg-color="var(--u-light-color)"></u-gap>
+ */
+const props = defineProps(GapProps);
+
+/**
+ * 间隔槽样式
+ */
+const gapStyle = computed(() => {
+    return {
+        backgroundColor: props.bgColor,
+        height: $u.addUnit(props.height),
+        marginTop: $u.addUnit(props.marginTop),
+        marginBottom: $u.addUnit(props.marginBottom)
+    };
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../libs/css/style.components.scss';
+</style>