collapse 可折叠面板的状态改变事件及布局

<collapse class="collapse" @on-change="setName"> <panel name="1"> <span class="sx">顯示篩選:</span> <p slot="content"> <date-picker class="date-picker" :options="options1" v-model="dateModel" placement="bottom" format="yyyy-MM-dd HH:mm" type="datetimerange" placeholder="請選擇日期" @on-change="dateChange" @on-ok="sure" @on-clear="isEmpty"></date-picker> </p> </panel> </collapse>

在setName里面可以写面板状态变化触发的事件:

setName:function () { if(this.isZ){ $(".sx").text("關閉篩選"); this.isZ=false; $(".tag").hide(); }else{ $(".sx").text("顯示篩選"); if(this.flag==1){ $(".tag").show(); }else{ $(".tag").hide(); } this.isZ=true; } },

布局:

(注意:collapse 里面的内容会受到collapse的设置的宽度所限制,比如我在里面放置了一些内容老是不能显示在同一行,因为不是同一时间写的,所以就忽略了这一点,后来就改了过来)

html:

<collapse class="collapse" @on-change="setName"> <panel name="1"> <span class="sx">顯示篩選:</span> <p slot="content"> //此處填折疊面板裏面的內容布局代碼 </p> </panel> </collapse>

css:

.collapse{ float: left; border-width: 0px; width: 300px; margin-left: 200px; } .sx { font-size: 14px; } .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header{ background: #fff; } .ivu-collapse-content>.ivu-collapse-content-box{ margin-left: 50px; }

樣式: