59 lines
997 B
Plaintext
59 lines
997 B
Plaintext
<template>
|
||
<view
|
||
class="cl-row"
|
||
:class="[pt.className]"
|
||
:style="{
|
||
marginLeft: margin,
|
||
marginRight: margin
|
||
}"
|
||
>
|
||
<slot></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from "vue";
|
||
import { parsePt, parseRpx } from "@/cool";
|
||
|
||
defineOptions({
|
||
name: "cl-row"
|
||
});
|
||
|
||
// 组件属性定义
|
||
const props = defineProps({
|
||
// 透传样式配置
|
||
pt: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
// 栅格间隔，单位rpx
|
||
gutter: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
});
|
||
|
||
// 透传类型定义
|
||
type PassThrough = {
|
||
// 自定义类名
|
||
className?: string;
|
||
};
|
||
|
||
// 解析透传配置
|
||
const pt = computed(() => parsePt<PassThrough>(props.pt));
|
||
|
||
// 计算栅格间距的负边距,用于抵消列的padding
|
||
const margin = computed(() => `-${parseRpx(props.gutter / 2)}`);
|
||
|
||
// 暴露gutter属性给子组件使用
|
||
defineExpose({
|
||
gutter: computed(() => props.gutter)
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.cl-row {
|
||
@apply flex flex-row flex-wrap relative;
|
||
}
|
||
</style>
|