naive-ui/demo/documentation/components/collapse/enUS/itemHeaderClick.demo.md

43 lines
759 B
Markdown
Raw Normal View History

2020-03-19 18:26:48 +08:00
# Click on Item Header
```html
<n-collapse
v-model="activeNames"
@item-header-click="handleItemHeaderClick"
>
<n-collapse-item name="1">
<template v-slot:header>
Bronze
</template>
<div>Okay</div>
</n-collapse-item>
<n-collapse-item name="2">
<template v-slot:header>
Silver
</template>
<div>Good</div>
</n-collapse-item>
<n-collapse-item name="3">
<template v-slot:header>
Gold
</template>
<div>Excellent</div>
</n-collapse-item>
</n-collapse>
```
```js
export default {
data () {
return {
activeNames: []
}
},
methods: {
handleItemHeaderClick ({
name,
expanded
}) {
this.$NMessage.info(`Name: ${name}, Expanded: ${expanded}`)
}
}
}
```