# Collapse 手风琴
手风琴组件
# 使用文档
对复杂的区域进行分组和隐藏,保持页面的整洁
# 代码演示
1、可以同时展开多个面板
标题1
标题2
标题3
<template>
<WhCollapse :selected.sync="selectTab">
<WhCollapseItem title="标题1" name="1">内容1xxxxx</WhCollapseItem>
<WhCollapseItem title="标题2" name="2">内容2xxxxx</WhCollapseItem>
<WhCollapseItem title="标题3" name="3">内容3xxxxx</WhCollapseItem>
</WhCollapse>
</template>
<script>
export default {
name: 'collapse',
data() {
return {
selectTab: ['1']
}
}
}
</script>
2、每次只打开一个面板
标题1
标题2
标题3
<template>
<WhCollapse :selected.sync="selectTab" single>
<WhCollapseItem title="标题1" name="1">内容1xxxxx</WhCollapseItem>
<WhCollapseItem title="标题2" name="2">内容2xxxxx</WhCollapseItem>
<WhCollapseItem title="标题3" name="3">内容3xxxxx</WhCollapseItem>
</WhCollapse>
</template>
<script>
export default {
name: 'collapse',
data() {
return {
selectTab: ['1']
}
}
}
</script>
← Tabs 标签页