源代码
<template>
<div>
<h2>Accordion Style</h2>
<Accordion class="a1" :animate="true">
<AccordionPanel v-for="menu in menus" :key="menu.text" :title="menu.text" :iconCls="'fa fa-'+menu.iconCls">
<div style="padding: 5px">
<a class="item" href="#" v-for="item in menu.submenus" :key="item">{{item}}</a>
</div>
</AccordionPanel>
</Accordion>
</div>
</template>
<script>
export default {
data() {
return {
menus: [
{
text: "Forms",
iconCls: "wpforms",
submenus: ["Form Element", "Wizard", "File Upload"]
},
{
text: "Mail",
iconCls: "at",
submenus: ["Inbox", "Sent", "Trash"]
},
{
text: "Layout",
iconCls: "table",
submenus: ["Panel", "Accordion", "Tabs"]
}
]
};
}
};
</script>
<style>
.a1.accordion .accordion-header {
border-bottom-color: transparent;
background: #f3f5f6;
color: #768399;
}
.a1.accordion .accordion-body {
border-bottom-color: transparent;
background: #fcfcfd;
color: #768399;
}
.a1.accordion .accordion-header .panel-title {
color: #768399;
height: 30px;
line-height: 30px;
padding-left: 20px;
}
.a1.accordion .accordion-header-selected,
.a1.accordion .accordion-header:hover {
color: #768399;
background: #eaeeef;
}
.a1 .item {
text-decoration: none;
display: block;
color: #616161;
padding: 7px 0 7px 20px;
}
.a1 .item:hover {
color: #428bca;
}
@import "//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
</style>