vue3 form表单布局组件

效果图

代码

<template><div class="layout-box"><div v-if="label" class="label"><span>{{ `${label}` }}</span><span v-if="colon" class="colon">{{ ':' }}</span></div><div class="content"><slot></slot></div></div>
</template><script setup>
const props = defineProps({// 是否展示冒号colon: {type: Boolean,default: true},// label名字label: {type: String,default: ""}
});
</script><style lang="scss" scoped>
.layout-box {display: flex;align-items: center;.label {font-size: 12px;flex-grow: 0;max-width: 100%;white-space: nowrap;.colon {margin-inline-start: 2px;margin-inline-end: 8px;}}.content {width: 100%;& > :deep(*) {box-sizing: border-box;width: 100%;}}
}
</style>