今天做頁面的時候看到了折疊面板，當然最簡單的當然是用css的display：none配合js來改變，但是動畫的方面可能需要自己寫，而且如果有類似手風琴類型的只能有一個為打開狀態，又需要額外的判斷，所以這里推薦elementUI的折疊面板，通過solt插槽來改變其中的內容和標題。
看一下設計圖，與element有沖突的在于四個按鈕和右側折疊展開和右側ui圖標，其余就是普通的div+css就能解決。
首先，我們使用@click為四個按鈕綁定點擊事件。發現點擊時彈窗正確顯示，但是點擊編輯按鈕時折疊面板自動折疊了。
其余三個也是一樣的情況，為什么會出現這種情況呢？查閱了一下資料，原來是因為js的事件冒泡，由內到外進行事件傳播，出發了父元素的折疊事件，于是添加了@click.stop得以解決。
右側的文字和箭頭問題。
查閱一下element的資料。發現當處在手風琴模式下，value值為折疊面板的name，而普通模式下是一個數組，能拿到name那么問題就很簡單了。
我們通過拿到value綁定的值并使用三元運算來動態改變右側文字，文字的問題解決。
關于箭頭的問題，如果對定制需求不大，可以直接通過：：v-deep強行改變element本身的css。
如果有定制需求，我們也可以自己寫圖標，這里element也提供了大量的圖標，我們通過使用’’>改變class的名字就能獲取element里的各種圖標。在通過前文所說的三元運算來修改i本身的css，給原本i設置transform: rotate(0deg);transition: all .2s;然后當折疊面板被選中，添加新的css設置transform: rotate(180deg);就能實現自定義的轉換，并具有動畫效果。
上一篇： vue功能實現之計算屬性
下一篇： Css基礎-畫一個三角形
