前沿
人生在于折腾,代码也在于折腾,再折腾中进步,再折腾中寻找更好的方法
最近在开发项目中遇到一个带动画效果的手风琴折叠面板,看了element-ui的折叠面板,发现并不适用于自己的项目,于是乎就决定自己搞一个,说干就干,把我搞得过程记录下来,一方面方便自己学习,记录,一方面帮助大家。有什么错误的地方或者写的不好的地方请多多指正。
element-ui 折叠面板效果图
话不多说,先上代码。
1,第一步,先新建一个Accordion.vue文件用来存放你的组件。
<template>
<div class="Accordion">
<!-- Accordion Title -->
<div class="AccordionTitle">
<div class="AccordionTitleL LEFTTEXT"
v-text="AccordionData"
v-show="isSlotSecond != 2"></div>
<div class="AccordionTitleL LEFTTEXT"
v-show="isSlotSecond == 2">
<slot name="Second"></slot>
</div>
<div class="ClickArea"
@click="Shrink">
<div class="AccordionTitleR LEFTTEXT"
v-text="RightContent"></div>
</div>
</div>
<!-- Accordion Body -->
<div class="AccordionBody"
ref="AccordionBody">
<!-- 接受slot的容器 -