|
@@ -0,0 +1,41 @@
|
|
|
+<template>
|
|
|
+ <view class="fs-space" :class="{'gutter-v': gutter}" :style="{gap: size}">
|
|
|
+ <slot></slot>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "fs-space"
|
|
|
+}
|
|
|
+</script>
|
|
|
+<script setup>
|
|
|
+const props = defineProps({
|
|
|
+ size: {
|
|
|
+ type: String,
|
|
|
+ default: '20rpx'
|
|
|
+ },
|
|
|
+ direction: {
|
|
|
+ type: String,
|
|
|
+ default: 'row',
|
|
|
+ validator(value) {
|
|
|
+ return ['row', 'column'].includes(value)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ justify: {
|
|
|
+ type: String,
|
|
|
+ default: 'flex-start'
|
|
|
+ },
|
|
|
+ gutter: Boolean
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.fs-space{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: v-bind(direction);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: v-bind(justify);
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|