vue实现groupbox样式

实现 GroupBox 样式的 Vue 组件

在 Vue 中实现类似 GroupBox 的样式，可以通过自定义组件结合 CSS 完成。以下是一个完整的实现方案：

基础 GroupBox 组件

创建 GroupBox.vue 文件：

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

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

<style scoped>
.group-box {
  margin: 15px 0;
}

.group-box fieldset {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 15px;
  position: relative;
}

.group-box-legend {
  font-size: 14px;
  font-weight: bold;
  padding: 0 5px;
  color: #666;
  width: auto;
  border: none;
  margin-left: 10px;
}
</style>

使用 GroupBox 组件

<template>
  <div>
    <group-box title="用户信息">
      <div class="form-group">
        <label>用户名</label>
        <input type="text" v-model="username">
      </div>
      <div class="form-group">
        <label>密码</label>
        <input type="password" v-model="password">
      </div>
    </group-box>
  </div>
</template>

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

export default {
  components: {
    GroupBox
  },
  data() {
    return {
      username: '',
      password: ''
    }
  }
}
</script>

高级样式定制

可以通过 props 传递样式参数实现更灵活的定制：

<template>
  <div class="group-box" :style="{ borderColor: borderColor }">
    <fieldset>
      <legend v-if="title" 
              class="group-box-legend"
              :style="{ color: titleColor }">
        {{ title }}
      </legend>
      <slot></slot>
    </fieldset>
  </div>
</template>

<script>
export default {
  name: 'GroupBox',
  props: {
    title: {
      type: String,
      default: ''
    },
    borderColor: {
      type: String,
      default: '#ddd'
    },
    titleColor: {
      type: String,
      default: '#666'
    }
  }
}
</script>

动画效果增强

添加展开/折叠功能：

<template>
  <div class="group-box">
    <fieldset>
      <legend 
        @click="toggle"
        class="group-box-legend clickable">
        {{ 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: ''
    }
  },
  data() {
    return {
      isOpen: true
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<style scoped>
.clickable {
  cursor: pointer;
}

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

响应式设计调整

针对不同屏幕尺寸调整样式：

@media (max-width: 768px) {
  .group-box fieldset {
    padding: 8px 10px;
  }

  .group-box-legend {
    font-size: 12px;
  }
}

这些实现方案提供了从基础到高级的 GroupBox 样式实现，可以根据项目需求选择合适的方案或进行组合使用。