前沿

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

---

最近在开发项目中遇到一个带动画效果的手风琴折叠面板，看了element-ui的折叠面板，发现并不适用于自己的项目，于是乎就决定自己搞一个，说干就干，把我搞得过程记录下来，一方面方便自己学习，记录，一方面帮助大家。有什么错误的地方或者写的不好的地方请多多指正。

---

element-ui 折叠面板效果图

微信图片_20180725203537.png

话不多说，先上代码。

---

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的容器 -->   
      <!-- 这里我才用slot的方法把手风琴内的内容插件里，以方便控制，达到灵活的效果 -->
      <div class="ContentA" >
        <slot name="First"></slot>
        <p class="isshrink" v-show="isShrink"></p>
      </div>
    </div>
  </div>
</template>
  <script>
/**
 * Accordionindex   控制某一个展开收缩
 * AccordionData    左上角标题的文字
 * isSlotSecond     决定显示那个插槽 first or second
 * 这样的好处可以实现多个共存
 */
export default {
  props: ["AccordionData", "Accordionindex", "isSlotSecond"],
  data() {
    return {
      RightContent: "收缩",
      isshow: this.Accordionindex,
      isShrink:false
    };
  },
  methods: {
    Shrink() {
      let AllHiden = this.$refs.AccordionBody;
      let eleMoreHeight = AllHiden.childNodes[0].offsetHeight;
      AllHiden.style.height = eleMoreHeight + "px";
      setTimeout(() => {
        if (this.isshow == 0) {
          AllHiden.style.height = "0px";
          this.isshow = 1;
          this.RightContent = "展开";
          this.isShrink = false;
        } else {
          AllHiden.style.height = eleMoreHeight + "px";
          this.isshow = 0;
          this.RightContent = "收缩";
          this.isShrink = true;
        }
      }, 1);
    }
  }
};
</script>
<style scoped>
.Accordion {
  width: 100%;
  height: auto;
}
.AccordionTitle {
  width: 100%;
  height: 50px;
  background: #e4eaec;
  padding: 0px 20px 0px 20px;
  display: flex;
}
/* 动画效果采用css3来实现 */
.AccordionBody {
  position: relative;
  height: auto;
  overflow: hidden;
  -webkit-transition: height 0.6s;
  -moz-transition: height 0.6s;
  -o-transition: height 0.6s;
  transition: height 0.6s;
}
.AccordionTitleL {
  float: left;
  font-size: 14px;
  background: #e4eaec;
}
.AccordionTitleR {
  float: right;
  font-size: 12px;
  color: #518bdc;
}
.LEFTTEXT {
  height: 50px;
  line-height: 50px;
}
.ClickArea {
  flex: 1;
}
.isshrink{
  width: 100%;
  height: 20px;

}
/* 后期如果有修改样式的需求，直接在你的引用页面修改就好 */
</style>
    

2.第二步，新建一个index.vue文件来引用你的组件

<template>
  <div class="FundMangerDetail">
    <div class="baseBox W100 BGCW MT20">
      <!-- 引用你的组件 -->
      <Accordion class="rightFixed0"
                 :Accordionindex="0"
                 :isSlotSecond="0"
                 :AccordionData="baseInformation">
        <div class="baseInformation"
             slot="First">
             <!-- 放入你要插入到内容 -->
          <baseInformation></baseInformation>
        </div>
      </Accordion>
      <!-- 一个页面中可以i写多个 -->
    </div>
  </div>
</template>
<script>
import Accordion from "@/components/Accordion/index";
import baseInformation from "./Models/baseInformation";
export default {
  components: {
    Accordion,
    baseInformation,
  },
  data() {
    return {
      bodyScroll: "",
      baseInformation: "基本资料",
    };
  },
  mounted(){
  },
  methods: {

    
  }
};
</script>
<style  rel="stylesheet/scss" lang="scss">
</style>

总结

---

至此，一个完整的vue折叠面板就完成了，直接用就好了，有什么缺陷希望多多指正，以后会更新更加完整的方案。希望可以帮助到小伙伴们。