1 综述
用Bootstrap的CSS部分实现CSS效果,VueJS实现Accordian效果。利用Vue JS的v-show
或v-if
指令,显示或隐藏panel-body
2 过程
构建相应的Component
利用Bootstrap写相应的template
注册Component,完成相关的数据、属性、方法
2.1 构建相应的Component
<div id="app">
<panel></panel>
</div>
2.2 利用Bootstrap写相应的template
<template id="accordian-template">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title"><a href="">{{body.title}}</a></h4>
</div>
<div class="panel-body">
<p>{{body.content}}</p>
</div>
</div>
</template>
2.3 注册Component,完成相关的数据、属性、方法
为了让数组变为对象,因此我们要给
panel
设置item
属性,并赋值为数组panels
,同时在注册compnent是也要声明属性。<panel :item="panels"></panel> Vue.component('panel',{ template:'#accordian-template', props:['item'] })
实例化Vue,给数组
panels
赋值,由于v-show
指令需要数值变化,不能给相应的值一个全局数据,所以在每一个对象中应该设置show
这个数据。new Vue({ el:'#app', data:{ panels:[ {title:'Section 1',content:'This is section 1',show:false}, {title:'Section 2',content:'This is section 2',show:false}, {title:'Section 3',content:'This is section 3',show:false} ] } });
循环
panel
,每个.panel-body
显示与否由show
取值决定,当show=true
时就显示.panel-body
,否则隐藏。点击.panel-title
时改变show
的值以此来影响.panel-body
的现实与隐藏。<template id="accordian-template"> <div class="panel panel-default" v-for="body in item"> <div class="panel-heading" > <h4><a href="" @click.prevent="body.show = !body.show">{{body.title}}</a></h4> </div> <div class="panel-body" v-show="body.show" transition="toggle"> <p>{{body.content}}</p> </div> </div> </template>
给
.panel-body
设置动画效果,需要指明transition=x
和设置x.enter,x.leave
<div class="panel-body" v-show="body.show" transition="toggle"> <p>{{body.content}}</p> </div> .toggle-enter,.toggle-leave{ height:0; opacity:0; padding:0 15px; } .panel-body{ transition:all 1s; overflow:hidden; }
3 总结
将数组转换为对象并取值,需要给component显示声明属性
每个地方的值需要由
body.show
获得component的过度效果,需要定义transition名,并设置相应的-enter,-leave效果
4 用jQuery实现
法一:点击
.panel-title
时获取相应的[data-target]
,给id=[data-target]
添加或移除.in
。这是Bootstrap中的实现方法。其方法有三个class..collapse
隐藏元素,.collapse.in
显示元素,.collapsing
隐藏和显示之间的过渡效果。法二:直接给
id=[data-target]
的元素应用animate()
函数,并设置height:toggle
或直接使用slideToggle()函数。法三:没有过渡效果。直接给
id=[data-target]
的元素应用toggle()
函数