2018-02-01 18:18:05 +08: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-06 16:53:30 +08:00
< a-collapse v-model = "activeKey" >
2018-02-02 16:34:27 +08:00
< a-collapse-panel header = "This is panel header 1" key = "1" >
2018-02-01 18:18:05 +08:00
< p > {{text}}< / p >
< / a-collapse-panel >
2018-02-02 16:34:27 +08:00
< a-collapse-panel header = "This is panel header 2" key = "2" :disabled = 'false' >
2018-02-01 18:18:05 +08:00
< p > {{text}}< / p >
< / a-collapse-panel >
2018-02-02 16:34:27 +08:00
< a-collapse-panel header = "This is panel header 3" key = "3" disabled >
2018-02-01 18:18:05 +08:00
< p > {{text}}< / p >
< / a-collapse-panel >
< / a-collapse >
< / div >
< / template >
< script >
export default {
2018-02-01 18:32:17 +08: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 16:34:27 +08:00
activeKey: ['1']
2018-02-01 18:32:17 +08:00
}
2018-02-01 18:18:05 +08:00
},
2018-02-06 16:53:30 +08:00
watch: {
activeKey(key){
2018-02-01 18:32:17 +08:00
console.log(key)
2018-02-06 16:53:30 +08:00
}
2018-02-01 18:32:17 +08:00
},
}
2018-02-01 18:18:05 +08:00
< / script >
```