今天做頁面的時(shí)候看到了折疊面板，當(dāng)然最簡單的當(dāng)然是用css的display：none配合js來改變，但是動(dòng)畫的方面可能需要自己寫，而且如果有類似手風(fēng)琴類型的只能有一個(gè)為打開狀態(tài)，又需要額外的判斷，所以這里推薦elementUI的折疊面板，通過solt插槽來改變其中的內(nèi)容和標(biāo)題。

看一下設(shè)計(jì)圖，與element有沖突的在于四個(gè)按鈕和右側(cè)折疊展開和右側(cè)ui圖標(biāo)，其余就是普通的div+css就能解決。

首先，我們使用@click為四個(gè)按鈕綁定點(diǎn)擊事件。發(fā)現(xiàn)點(diǎn)擊時(shí)彈窗正確顯示，但是點(diǎn)擊編輯按鈕時(shí)折疊面板自動(dòng)折疊了。

其余三個(gè)也是一樣的情況，為什么會(huì)出現(xiàn)這種情況呢？查閱了一下資料，原來是因?yàn)?/span>js的事件冒泡，由內(nèi)到外進(jìn)行事件傳播，出發(fā)了父元素的折疊事件，于是添加了@click.stop得以解決。

右側(cè)的文字和箭頭問題。

查閱一下element的資料。發(fā)現(xiàn)當(dāng)處在手風(fēng)琴模式下，value值為折疊面板的name，而普通模式下是一個(gè)數(shù)組，能拿到name那么問題就很簡單了。

我們通過拿到value綁定的值并使用三元運(yùn)算來動(dòng)態(tài)改變右側(cè)文字，文字的問題解決。

關(guān)于箭頭的問題，如果對定制需求不大，可以直接通過：：v-deep強(qiáng)行改變element本身的css。

如果有定制需求，我們也可以自己寫圖標(biāo)，這里element也提供了大量的圖標(biāo)，我們通過使用’’>改變class的名字就能獲取element里的各種圖標(biāo)。在通過前文所說的三元運(yùn)算來修改i本身的css，給原本i設(shè)置transform: rotate(0deg);transition: all .2s;然后當(dāng)折疊面板被選中，添加新的css設(shè)置transform: rotate(180deg);就能實(shí)現(xiàn)自定義的轉(zhuǎn)換，并具有動(dòng)畫效果。