ant-design-vue/components/collapse/demo/basic.md

43 lines
1.1 KiB
Markdown
Raw Normal View History

2018-02-01 10:18:05 +00:00
<cn>
#### 折叠面板
可以同时展开多个面板,这个例子默认展开了第一个。
</cn>
<us>
#### Collapse
More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
</us>
```html
<template>
<div>
2018-02-02 08:34:27 +00:00
<a-collapse v-model="activeKey" @change="changeActivekey">
<a-collapse-panel header="This is panel header 1" key="1">
2018-02-01 10:18:05 +00:00
<p>{{text}}</p>
</a-collapse-panel>
2018-02-02 08:34:27 +00:00
<a-collapse-panel header="This is panel header 2" key="2" :disabled='false'>
2018-02-01 10:18:05 +00:00
<p>{{text}}</p>
</a-collapse-panel>
2018-02-02 08:34:27 +00:00
<a-collapse-panel header="This is panel header 3" key="3" disabled>
2018-02-01 10:18:05 +00:00
<p>{{text}}</p>
</a-collapse-panel>
</a-collapse>
</div>
</template>
<script>
export default {
2018-02-01 10:32:17 +00:00
data () {
return {
text: `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
2018-02-02 08:34:27 +00:00
activeKey: ['1']
2018-02-01 10:32:17 +00:00
}
2018-02-01 10:18:05 +00:00
},
2018-02-01 10:32:17 +00:00
methods: {
changeActivekey (key) {
console.log(key)
},
},
}
2018-02-01 10:18:05 +00:00
</script>
```