client-app/components/hc-row-col/row.vue

<template>
    <div class="hc-row" :style="styleVal">
        <slot />
    </div>
</template>

<script>
export default {name: 'HcRow'}
</script>

<script setup>
import {onMounted, ref, watch} from "vue";
const props = defineProps({
    //栅格间隔
    gutter: {
        type: [Number, String],
        default: 0,
    },
    //水平排列方式
    justify: {
        type: String,
        default: '',
    },
    //垂直排列方式
    align: {
        type: String,
        default: '',
    },
})

onMounted(() => {
    setStyleValue(props.gutter, props.justify, props.align)
})

//监听
watch(() => [
    props.gutter,
    props.justify,
    props.align,
], ([gutter, justify, align]) => {
    setStyleValue(gutter, justify, align)
})

//处理栅格间隔
const styleVal = ref({})
function setStyleValue(gutter, justify, align) {
    const gutters = Number(gutter)
    styleVal.value['--hc-row-justify'] = justify ? justify : 'start'
    styleVal.value['--hc-row-align'] = align ? align : 'start'
    if (gutters !== 0) {
        const num = Math.floor(gutters / -2) + (gutters % 2) + 'px'
        styleVal.value['--hc-row-margin'] = num ? num : '0'
    }
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>