vue实现groupbox
Vue 实现 GroupBox 组件
在 Vue 中实现类似 WinForms/WPF 的 GroupBox 效果，可以通过自定义组件实现分组内容的视觉隔离和标题展示。以下是两种常见实现方式：
基于插槽和 CSS 的实现
创建一个可复用的 GroupBox 组件，利用插槽传递内容：
<!-- GroupBox.vue -->
<template>
<div class="group-box">
<fieldset>
<legend v-if="title" class="group-box-title">{{ title }}</legend>
<slot></slot>
</fieldset>
</div>
</template>
<script>
export default {
props: {
title: String
}
}
</script>
<style scoped>
.group-box {
margin: 1em 0;
}
fieldset {
border: 1px solid #ddd;
border-radius: 4px;
padding: 0.5em 1em 1em;
}
.group-box-title {
padding: 0 0.5em;
color: #666;
font-size: 0.9em;
}
</style>使用方式：
<GroupBox title="用户信息">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
</GroupBox>基于 Card 组件的变体
若使用 UI 框架（如 Element UI/Vuetify），可基于现有组件扩展：
<template>
<el-card class="group-box" :header="title">
<slot></slot>
</el-card>
</template>
<script>
import { ElCard } from 'element-plus'
export default {
components: { ElCard },
props: {
title: String
}
}
</script>
<style>
.group-box {
margin-bottom: 20px;
}
</style>动态折叠功能扩展
增加折叠/展开功能（需 Vue 3 的 v-model 支持）：
<template>
<div class="group-box">
<div class="header" @click="toggle">
{{ title }}
<span class="toggle-icon">{{ isOpen ? '−' : '+' }}</span>
</div>
<div v-show="isOpen" class="content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: String,
modelValue: { type: Boolean, default: true }
},
emits: ['update:modelValue'],
computed: {
isOpen: {
get() { return this.modelValue },
set(val) { this.$emit('update:modelValue', val) }
}
},
methods: {
toggle() { this.isOpen = !this.isOpen }
}
}
</script>
<style scoped>
.header {
cursor: pointer;
padding: 8px;
background: #f5f5f5;
border: 1px solid #ddd;
}
.content {
padding: 12px;
border: 1px solid #ddd;
border-top: none;
}
.toggle-icon {
float: right;
}
</style>使用方式：
<GroupBox v-model="isOpen" title="高级选项">
<!-- 内容 -->
</GroupBox>注意事项
- 边框样式可通过 CSS 的
border属性自定义 - 折叠功能需处理动画效果时可添加
<transition>包裹 - 在移动端建议增加点击区域的 padding 以提高可用性
- 若需要深色模式支持，可通过 CSS 变量动态切换边框颜色
