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

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

<script setup>
import {getCurrentInstance, onMounted, ref, watch} from "vue";
const props = defineProps({
    span: { //栅格占据的列数,1-24
        type: [Number, String],
        default: 24,
    },
})

//获取父组件实例
const parent = getCurrentInstance().parent
//渲染完成
onMounted(() => {
    setStyleValue(props.span)
})

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

//设置样式
const styleVal = ref({})
const setStyleValue = (span) => {
    if (parent?.type?.name === 'HcRow') {
        //处理栅格间隔
        const gutter = Number(parent?.props?.gutter ?? 0)
        if (gutter !== 0) {
            const num = Math.floor(gutter / 2) + (gutter % 2) + 'px'
            styleVal.value['--hc-row-padding'] = num ? num : '0'
        }
        //计算栅栏宽度
        const width = (1 / 24) * Number(span) * 100
        styleVal.value['--hc-col-width'] = `${width}%`
        styleVal.value['--hc-col-flex'] = `0 0 ${width}%`
    }
}
</script>

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