# Collapse 折叠
import { collapse, collapseItem } from 'vigour';
// collapse.name === 'vigour-collapse'
// collapseItem.name === 'vigour-collapse-item'
# Example
# Basic
By default, vigour-collapse
can display multiple vigour-collapse-items
at the same time.
默认情况下,vigour-collapse
可以同时显示多个 vigour-collapse-item
。
title 1
content 1
title 2
content 2
title 3
[ "title 1", "title 2" ]
<vigour-collapse v-model="unfold2">
<vigour-collapse-item title="title 1">content 1</vigour-collapse-item>
<vigour-collapse-item title="title 2">content 2</vigour-collapse-item>
<vigour-collapse-item title="title 3">content 3</vigour-collapse-item>
</vigour-collapse>
<blockquote>
{{ unfold2 }}
</blockquote>
export default {
data() {
return {
unfold2: ['title 1', 'title 2'],
}
}
}
# Single
The single
attribute enables vigour-collapse
to display only one vigour-collapse-item
at a time.
single
属性可以使 vigour-collapse
一次只能显示一个 vigour-collapse-item
。
title 1
content 1
title 2
title 3
[ "title 1" ]
<vigour-collapse v-model="unfold" single>
<vigour-collapse-item title="title 1">content 1</vigour-collapse-item>
<vigour-collapse-item title="title 2">content 2</vigour-collapse-item>
<vigour-collapse-item title="title 3">content 3</vigour-collapse-item>
</vigour-collapse>
<blockquote>
{{ unfold }}
</blockquote>
export default {
data() {
return {
unfold: ['title 1'],
}
}
}
# Props
# vigour-collapse
prop | type | default value | available value |
---|---|---|---|
v-model | array<string> | - | - |
single | boolean | false | - |
# vigour-collapse-item
prop | type | default value | available value |
---|---|---|---|
title | string | - | - |