用Vue JS實(shí)現(xiàn)Accordian效果

paney129 發(fā)布于2019-08-19 18:40 / 2385人閱讀

摘要：綜述用的部分實(shí)現(xiàn)效果，實(shí)現(xiàn)效果。循環(huán)每個顯示與否由取值決定，當(dāng)時就顯示，否則隱藏。點(diǎn)擊時改變的值以此來影響的現(xiàn)實(shí)與隱藏。其方法有三個隱藏元素，顯示元素，隱藏和顯示之間的過渡效果。法三沒有過渡效果。直接給的元素應(yīng)用函數(shù)

1 綜述

用Bootstrap的CSS部分實(shí)現(xiàn)CSS效果，VueJS實(shí)現(xiàn)Accordian效果。利用Vue JS的v-show或v-if指令，顯示或隱藏panel-body

2 過程

構(gòu)建相應(yīng)的Component

利用Bootstrap寫相應(yīng)的template

注冊Component，完成相關(guān)的數(shù)據(jù)、屬性、方法

2.1 構(gòu)建相應(yīng)的Component

2.2 利用Bootstrap寫相應(yīng)的template

2.3 注冊Component，完成相關(guān)的數(shù)據(jù)、屬性、方法

為了讓數(shù)組變?yōu)閷ο螅虼宋覀円opanel設(shè)置item屬性，并賦值為數(shù)組panels，同時在注冊compnent是也要聲明屬性。



Vue.component("panel",{
    template:"#accordian-template"，
    props:["item"]
  })

實(shí)例化Vue，給數(shù)組panels賦值，由于v-show指令需要數(shù)值變化，不能給相應(yīng)的值一個全局?jǐn)?shù)據(jù)，所以在每一個對象中應(yīng)該設(shè)置show這個數(shù)據(jù)。

   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}
          ]
      }
   });

循環(huán)panel,每個.panel-body顯示與否由show取值決定，當(dāng)show=true時就顯示.panel-body，否則隱藏。點(diǎn)擊.panel-title時改變show的值以此來影響.panel-body的現(xiàn)實(shí)與隱藏。

給.panel-body設(shè)置動畫效果，需要指明transition=x和設(shè)置x.enter,x.leave

   
   {{body.content}}
 
 
 .toggle-enter,.toggle-leave{
         height:0;
         opacity:0;
         padding:0 15px;
    }
   .panel-body{
         transition:all 1s;
         overflow:hidden;
   }

3 總結(jié)

將數(shù)組轉(zhuǎn)換為對象并取值，需要給component顯示聲明屬性

每個地方的值需要由body.show獲得

component的過度效果，需要定義transition名，并設(shè)置相應(yīng)的-enter,-leave效果

4 用jQuery實(shí)現(xiàn)

法一：點(diǎn)擊.panel-title時獲取相應(yīng)的[data-target],給id=[data-target]添加或移除.in。這是Bootstrap中的實(shí)現(xiàn)方法。其方法有三個class..collapse隱藏元素，.collapse.in顯示元素，.collapsing隱藏和顯示之間的過渡效果。

法二：直接給id=[data-target]的元素應(yīng)用animate()函數(shù)，并設(shè)置height:toggle或直接使用slideToggle()函數(shù)。

法三：沒有過渡效果。直接給id=[data-target]的元素應(yīng)用toggle()函數(shù)