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 功能，可以根据项目需求进一步定制样式和功能。
