vue实现groupbox

实现 GroupBox 组件的方法

在 Vue 中实现类似 GroupBox 的组件，可以通过封装一个自定义组件来实现。GroupBox 通常用于将相关控件分组，并带有标题边框。

基础实现

创建一个 Vue 单文件组件 GroupBox.vue：

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

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

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

.group-box legend {
  padding: 0 5px;
  font-size: 14px;
  color: #666;
}
</style>

使用方法

在父组件中引入并使用：

<template>
  <div>
    <group-box title="用户信息">
      <div>姓名: <input type="text"></div>
      <div>年龄: <input type="number"></div>
    </group-box>

    <group-box title="联系方式">
      <div>电话: <input type="tel"></div>
      <div>邮箱: <input type="email"></div>
    </group-box>
  </div>
</template>

<script>
import GroupBox from './GroupBox.vue'

export default {
  components: {
    GroupBox
  }
}
</script>

高级功能扩展

如果需要更灵活的 GroupBox，可以添加折叠功能：

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

<script>
export default {
  name: 'GroupBox',
  props: {
    title: {
      type: String,
      default: ''
    },
    collapsible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isOpen: true
    }
  },
  methods: {
    toggle() {
      if (this.collapsible) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

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

.group-box legend {
  padding: 0 5px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  user-select: none;
}

.toggle-icon {
  margin-left: 5px;
}
</style>

使用扩展版本

<group-box title="高级选项" collapsible>
  <div>选项1: <input type="checkbox"></div>
  <div>选项2: <input type="checkbox"></div>
</group-box>

以上实现提供了基础的 GroupBox 功能，可以根据项目需求进一步定制样式和功能。