vue实现groupbox样式
Vue 实现 GroupBox 样式
在 Vue 中实现 GroupBox（分组框）样式，可以通过自定义组件结合 CSS 完成。以下是几种常见方法：
使用 CSS 边框和阴影模拟 GroupBox
通过 HTML 结构和 CSS 样式模拟 GroupBox 的外观效果。
<template>
<div class="group-box">
<div class="group-box-title">{{ title }}</div>
<div class="group-box-content">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: 'Group Title'
}
}
}
</script>
<style scoped>
.group-box {
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
margin: 10px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.group-box-title {
font-weight: bold;
margin: -10px -10px 10px -10px;
padding: 5px 10px;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
</style>使用第三方 UI 库
许多 Vue UI 库（如 Element UI、Vuetify 等）提供了类似的组件，可直接使用。
以 Element UI 为例：
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>{{ title }}</span>
</div>
<slot></slot>
</el-card>
</template>
<script>
export default {
props: {
title: String
}
}
</script>使用 CSS 伪元素实现标题装饰
通过 CSS 伪元素为 GroupBox 添加更复杂的装饰效果：
.group-box-title {
position: relative;
padding-left: 15px;
}
.group-box-title:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background-color: #409eff;
border-radius: 2px;
}动态主题支持
通过 props 允许动态切换主题颜色：
<template>
<div class="group-box" :style="{'--theme-color': color}">
<!-- 内容 -->
</div>
</template>
<style scoped>
.group-box {
--theme-color: #409eff;
border-left: 3px solid var(--theme-color);
}
</style>响应式设计
添加响应式样式以适应不同屏幕尺寸：
@media (max-width: 768px) {
.group-box {
margin: 5px 0;
padding: 5px;
}
.group-box-title {
font-size: 14px;
}
}以上方法可以根据实际需求组合使用，创建出符合项目风格的 GroupBox 组件。
