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 组件。