28 lines
548 B
Vue
28 lines
548 B
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
gap: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
const gapWith = ref('1');
|
|
watch(() => props.gap, (value) => {
|
|
gapWith.value = value
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="NiSpace" data-prefix="Ni" :style="{ '--width': gapWith + 'rem' }" >
|
|
<slot/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.NiSpace {
|
|
position: relative;
|
|
--NiSpace-gap: 1rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--NiSpace-gap) /* 行和列之间的间距 */
|
|
}
|
|
</style> |