当前位置：首页 > VUE

vue实现groupbox

2026-02-10 07:09:30VUE

Vue 实现 GroupBox 组件

GroupBox 是一种常见的 UI 控件，用于将相关的内容分组并显示标题边框。以下是实现 GroupBox 的几种方法：

使用原生 HTML 和 CSS

通过 fieldset 和 legend 标签可以快速实现类似 GroupBox 的效果：

<template>
  <fieldset class="group-box">
    <legend>{{ title }}</legend>
    <slot></slot>
  </fieldset>
</template>

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

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

使用纯 CSS 实现

如果不想使用 fieldset，可以通过 div 和 CSS 实现：

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

<style scoped>
.group-box {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 10px 0;
}
.group-box-title {
  background-color: #f5f5f5;
  padding: 5px 10px;
  font-weight: bold;
  border-bottom: 1px solid #e0e0e0;
}
.group-box-content {
  padding: 10px;
}
</style>

使用第三方 UI 库

许多 Vue UI 组件库提供了类似的组件：

Element UI 的 Card 组件可以模拟 GroupBox：

<el-card :header="title" shadow="never">
<slot></slot>
</el-card>

Vuetify 的 v-card 组件：

<v-card>
<v-card-title>{{ title }}</v-card-title>
<v-card-text>
 <slot></slot>
</v-card-text>
</v-card>

添加交互功能

可以扩展 GroupBox 组件，添加折叠/展开功能：

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

<script>
export default {
  props: {
    title: String,
    defaultOpen: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isOpen: this.defaultOpen
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

样式定制

通过 props 允许自定义样式：

vue实现groupbox

<template>
  <div class="group-box" :style="{ borderColor: borderColor }">
    <div class="group-box-title" :style="{ backgroundColor: titleBgColor }">
      {{ title }}
    </div>
    <div class="group-box-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    borderColor: {
      type: String,
      default: '#e0e0e0'
    },
    titleBgColor: {
      type: String,
      default: '#f5f5f5'
    }
  }
}
</script>

这些方法提供了从简单到复杂的 GroupBox 实现方案，可以根据项目需求选择合适的实现方式。