当前位置：首页 > VUE

vue实现groupbox

2026-03-27 16:41:04VUE

Vue 实现 GroupBox 组件

在 Vue 中实现类似 WinForms/WPF 的 GroupBox 效果，可以通过自定义组件实现分组内容的视觉隔离和标题展示。以下是两种常见实现方式：

基于插槽和 CSS 的实现

创建一个可复用的 GroupBox 组件，利用插槽传递内容：

vue实现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），可基于现有组件扩展：

vue实现groupbox

<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 变量动态切换边框颜色

标签: vue groupbox

分享给朋友：

vue 实现滚动

实现滚动的基本方法在Vue中实现滚动效果可以通过多种方式完成，包括使用原生JavaScript、CSS或第三方库。以下是一些常见的方法：使用window.scrollTo方法实现页面滚动可以通…

轮播vue实现

使用 Vue 实现轮播功能基础轮播实现安装依赖（如使用 Swiper）： npm install swiper vue-awesome-swiper 组件代码示例： <templ…

vue拼图实现

实现 Vue 拼图游戏的方法使用 Vue 组件和动态数据绑定创建一个 Vue 组件来管理拼图的状态和逻辑。通过 v-for 动态渲染拼图块，利用 v-bind 绑定样式和位置。拼图块的数据可以存储…

vue源码实现

Vue 源码实现解析 Vue.js 的核心实现可以分为响应式系统、虚拟 DOM、模板编译、组件化等几个关键部分。以下是对这些核心机制的详细解析。响应式系统 Vue 的响应式系统基于 Object.…

vue实现结算页面

Vue 实现结算页面的核心步骤数据绑定与表单验证使用 Vue 的 v-model 绑定表单数据，例如收货地址、支付方式等。通过 Vue 的 computed 属性计算总价，结合 v-if 或 v-…

vue实现的聊天

Vue 实现的聊天应用使用 Vue 实现聊天应用可以通过 Vue 的响应式特性和组件化开发来构建高效、可维护的前端界面。以下是一个基于 Vue 3 的聊天应用实现方案。项目初始化创建 Vue…

vue实现groupbox