当前位置：首页 > VUE

vue实现groupbox

2026-01-07 21:32:01VUE

Vue 实现 GroupBox 组件

在 Vue 中实现类似 GroupBox 的效果可以通过自定义组件完成。GroupBox 通常是一个带有标题的边框容器，用于将相关控件分组显示。

基本实现方法

创建一个名为 GroupBox.vue 的单文件组件：

<template>
  <div class="group-box">
    <div class="group-box-header">
      <slot name="header">{{ title }}</slot>
    </div>
    <div class="group-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.group-box {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 10px 0;
  padding: 10px;
}

.group-box-header {
  font-weight: bold;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}

.group-box-content {
  padding: 5px;
}
</style>

使用插槽的灵活实现

为了更灵活地控制标题和内容，可以使用具名插槽：

vue实现groupbox

<template>
  <div class="group-box">
    <div class="group-box-header">
      <slot name="header"></slot>
    </div>
    <div class="group-box-content">
      <slot></slot>
    </div>
  </div>
</template>

使用时可以这样：

<GroupBox>
  <template v-slot:header>
    <h3>自定义标题</h3>
  </template>

  这里是内容区域
</GroupBox>

可折叠的 GroupBox

要实现可折叠/展开的功能，可以添加状态管理：

vue实现groupbox

<template>
  <div class="group-box">
    <div 
      class="group-box-header" 
      @click="isCollapsed = !isCollapsed"
    >
      <slot name="header">{{ title }}</slot>
      <span class="toggle-icon">
        {{ isCollapsed ? '+' : '-' }}
      </span>
    </div>
    <div 
      class="group-box-content" 
      v-show="!isCollapsed"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  data() {
    return {
      isCollapsed: false
    }
  }
}
</script>

<style scoped>
.group-box-header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
</style>

使用第三方 UI 库

如果项目中使用 Element UI 等第三方库，可以直接使用其提供的 Panel 或 Collapse 组件：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="分组标题" name="1">
      分组内容
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1']
    }
  }
}
</script>

样式定制建议

可以通过 CSS 变量或 props 实现主题定制：

<template>
  <div 
    class="group-box" 
    :style="{
      '--border-color': borderColor,
      '--header-bg': headerBackground
    }"
  >
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  props: {
    borderColor: {
      type: String,
      default: '#ddd'
    },
    headerBackground: {
      type: String,
      default: '#f5f5f5'
    }
  }
}
</script>

<style scoped>
.group-box {
  border: 1px solid var(--border-color);
}

.group-box-header {
  background-color: var(--header-bg);
}
</style>