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

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

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

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

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

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

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

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

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