vue-折叠面板效果折腾小记

前沿

人生在于折腾，代码也在于折腾，再折腾中进步，再折腾中寻找更好的方法

---

最近在开发项目中遇到一个带动画效果的手风琴折叠面板，看了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的容器 -