<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<style>
.container {
width: 500px;
height: 500px;
border: 1px solid skyblue;
}
li {
list-style: none;
width: 100%;
}
.des {
width: 100%;
height: 50px;
background-color: grey;
display: none;
}
.show {
display: block;
}
/*淡入淡出效果*/
.fade-enter-active, .fade-leave-active {
transition: all .2s;
}
.fade-enter, .fade-leave-active {
opacity: 0;
height: 0px;
}
</style>
</head>
<body>
<div id="app">
<accord
:list='msgs'
>
</accord>
</div>
</body>
<script type='text/x-template' id='tpl1'>
<div class="panel">
<li>
<p @click="toggle">{{title}}</p>
<transition name="fade">
<div class='des' :class='{show:active}' v-if="active">
<slot>
{{text}}
</slot>
</div>
</transition>
</li>
</div>
</script>
<script type='text/x-template' id='tpl2'>
<div class="container">
<panel v-for="(item, index) in list"
:title="item.title"
:text="item.text"
:active="activeIndex === index"
@toggle="activeIndex = index"
>
<div style="border: 1px solid red">
{{item.text}}
</div>
</panel>
</div>
</script>
<script>
var panelComponent = {
template: '#tpl1',
props: {
title: String,
text: String,
active: {
default: false,
type: Boolean
}
},
data: function () {
return {}
},
methods: {
toggle: function () {
this.$emit('toggle')
}
}
}
var panelComponent = {
template: '#tpl1',
props: {
title: String,
text: String,
active: {
default: false,
type: Boolean
}
},
data: function () {
return {}
},
methods: {
toggle: function () {
this.$emit('toggle')
}
}
}
var accordionComponent = {
template: '#tpl2',
components: {
'panel': panelComponent
},
data: function () {
return {
activeIndex: 0
}
},
props: {
list: {
type: Array,
default: []
}
},
methods: {}
}
var vm = new Vue({
el: '#app',
components: {
'accord': accordionComponent
},
data: {
msgs: [
{title: '1111111', text: '111111111'},
{title: '2222222', text: '222222222'},
{title: '3333333', text: '333333333'}
]
},
methods: {}
})
</script>
</html>
