自定义封装手风琴组件

为了项目使用手风琴组件，自定义封装并传值

  <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">
        <img
          v-show="isShrink == true"
          src="../assets/images/add.png"
          class="AccordionTitleR LEFTTEXT"
        />
        <img
          v-show="isShrink == false"
          src="../assets/images/reduce.png"
          class="AccordionTitleR LEFTTEXT"
        />
        <span class="fr wrongNum">错{{ wrongNum }}题</span>
      </div>
    </div>
    <div class="AccordionBody" ref="AccordionBody">
      <!-- 接受slot的容器 -->
      <div class="ContentA">
        <slot name="First">
          <span class="xian"></span>
        </slot>
        <p class="isshrink" v-show="isShrink"></p>
      </div>
    </div>
  </div>
</template>
  <script>
/**
 * Accordionindex   控制某一个展开收缩
 * AccordionData    左上角标题的文字
 * isSlotSecond     决定显示那个插槽 first or second
 * wrongNum         标题上的错题数
 */ 
export default {
  props: ["AccordionData", "Accordionindex", "isSlotSecond", "wrongNum"],
  data() {
    return {
      RightContent: "",
      isshow: this.Accordionindex,
      isShrink: true,
    };
  },
  methods: {
    Shrink() {
      let AllHiden = this.$refs.AccordionBody;
      let eleMoreHeight = AllHiden.childNodes[0].offsetHeight - 20;
      AllHiden.style.height = eleMoreHeight + "px";
      setTimeout(() => {
        if (this.isshow == 0) {
          console.log(AllHiden.childNodes[0].offsetHeight);
          AllHiden.style.height = eleMoreHeight + "px";
          this.isshow = 1;
          this.isShrink = false;
        } else {
          AllHiden.style.height = "0px";
          this.isshow = 0;
          this.isShrink = true;
        }
      }, 1);
    },
  },
};
</script>
<style scoped>
.Accordion {
  width: 100%;
  height: auto;
  box-shadow: 0px 2px 16px 0px rgb(153 153 153 / 30%);
  margin: 10px 0px;
}
.AccordionTitle {
  width: 100%;
  height: 1rem;
  background: #e4eaec;
  padding: 0px 0.2rem 0px 0.7rem;
  display: flex;
  position: relative;
}
.AccordionBody {
  position: relative;
  height: auto;
  overflow: hidden;
  height: 0px;
  -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;
  margin-left: 0.16rem;
}
.AccordionTitleR {
  position: absolute;
  left: 0.4rem;
  top: 0.36rem;
  width: 0.27rem;
  height: 0.27rem;
  font-size: 12px;
  color: #518bdc;
}
.LEFTTEXT {
  line-height: 50px;
}
.ClickArea {
  flex: 1;
}
.isshrink {
  width: 100%;
  height: 20px;
}
.baseInformation li {
  border-top: 1px solid #efefef;
  line-height: 1.07rem;
  text-indent: 10px;
  position: relative;
  margin-left: 0.43rem;
}
.baseInformation li p {
  font-size: 0.26rem;
  text-indent: 0.45rem;
}
.baseInformation li::after {
  content: "";
  display: block;
  width: 0.17rem;
  height: 0.17rem;
  border-radius: 50%;
  border: 1px solid #666666;
  position: absolute;
  top: 40%;
  left: -0.02rem;
  z-index: 99;
  overflow: hidden;
  background-color: #fff;
}
.FundMangerDetail {
  /* padding: 0px 20px 0px 20px; */
  background-color: #fff;
}
.AccordionTitle {
  background-color: #fff;
}
.AccordionTitleL {
  background-color: #fff;
}
.wrongNum {
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  line-height: 0.9rem;
}
</style>
	

引用组件：

<template>
  <div>
    <van-nav-bar
      title="我的错题-章节练习"
      left-arrow
      @click-left="onClickLeft"
      :border="false"
    >
    </van-nav-bar>
    <div class="FundMangerDetail">
      <div
        class="baseBox W100 BGCW MT20"
        v-for="(item, index) in baseInformation"
        :key="index"
      >
        <!-- 引用你的组件 -->
        <collapes
          class="rightFixed0"
          :Accordionindex="0"
          :isSlotSecond="0"
          :AccordionData="item.name"
          :wrongNum="item.num"
        >
          <div class="baseInformation" slot="First">
            <!-- 放入你要插入到内容 -->
            <li v-for="(items, ind) in item.show" :key="ind">
              <p @click="goMsg()">
                <span class="xian"></span>{{ items.name1 }}
                <span class="twoWrongNum fr">{{items.twoWrongNum}}></span>
              </p>
            </li>
          </div>
        </collapes>
      </div>
    </div>
  </div>
</template>
<script>
import collapes from "@/components/collapes.vue";
export default {
  components: {
    collapes,
    // baseInformation,
  },
  data() {
    return {
      bodyScroll: "",
      baseInformation: [
        {
          name: "生物化学",
          id: 1,
          num:10,
          show: [
            {
              name1: "第一节  蛋白质的结构与功能",
              twoWrongNum:30
            },
          ],
        },
        {
          name: "生理学",
          id: 2,
          num:10,
          show: [
            {
              name1: "第二节  核酸的结构与功能",
              twoWrongNum:30
            },
          ],
        },
        {
          name: "医学微生物学",
          id: 3,
          num:10,
          show: [
            {
              name1: "第二节  核酸的结构与功能",
              twoWrongNum:30
            },
          ],
        },
        {
          name: "小儿麻痹",
          id: 4,
          num:10,
          show: [
            {
              name1: "第三节  酶",
              twoWrongNum:30
            },
            {
              name1: "第四节  糖代谢",
              twoWrongNum:30
            },
            {
              name1: "第五节  生物氧化",
              twoWrongNum:30
            },
            {
              name1: "第五节  生物氧化",
              twoWrongNum:30
            },
            {
              name1: "第五节  生物氧化",
              twoWrongNum:30
            },
          ],
        },
        {
          name: "医学免疫学",
          id: 5,
          num:10,
          show: [
            {
              name1: "第一节  蛋白质的结构与功能",
              twoWrongNum:30
            },
          ],
        },
        {
          name: "病理学",
          id: 5,
          num:10,
          show: [
            {
              name1: "第一节  蛋白质的结构与功能",
              twoWrongNum:30
            },
          ],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    goMsg() {
      this.$router.push('/questionMsg')
    },
    onClickLeft() {
      this.$router.go(-1)
    },
  },
};
</script>
<style  lang="scss" scoped>
.FundMangerDetail{
  background-color: #fff;
  .AccordionTitle{
    background-color: #fff;
    .AccordionTitleL {
      background-color: #fff;
    }
  }
}
.twoWrongNum{

font-size: .24rem;
font-family: PingFang SC;
font-weight: 500;
color: #666666;
margin-right: .3rem;
}
</style>