vue展开折叠效果

代码

使用collapse.js进行使用

collapse.js

可以在utils里面写入

const elTransition =
  "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
  "before-enter"(el) {
    el.style.transition = elTransition;
    if (!el.dataset) el.dataset = {};
 
    el.dataset.oldPaddingTop = el.style.paddingTop;
    el.dataset.oldPaddingBottom = el.style.paddingBottom;
 
    el.style.height = 0;
    el.style.paddingTop = 0;
    el.style.paddingBottom = 0;
  },
 
  enter(el) {
    el.dataset.oldOverflow = el.style.overflow;
    if (el.scrollHeight !== 0) {
      el.style.height = el.scrollHeight + "px";
      el.style.paddingTop = el.dataset.oldPaddingTop;
      el.style.paddingBottom = el.dataset.oldPaddingBottom;
    } else {
      el.style.height = "";
      el.style.paddingTop = el.dataset.oldPaddingTop;
      el.style.paddingBottom = el.dataset.oldPaddingBottom;
    }
 
    el.style.overflow = "hidden";
  },
 
  "after-enter"(el) {
    el.style.transition = "";
    el.style.height = "";
    el.style.overflow = el.dataset.oldOverflow;
  },
 
  "before-leave"(el) {
    if (!el.dataset) el.dataset = {};
    el.dataset.oldPaddingTop = el.style.paddingTop;
    el.dataset.oldPaddingBottom = el.style.paddingBottom;
    el.dataset.oldOverflow = el.style.overflow;
 
    el.style.height = el.scrollHeight + "px";
    el.style.overflow = "hidden";
  },
 
  leave(el) {
    if (el.scrollHeight !== 0) {
      el.style.transition = elTransition;
      el.style.height = 0;
      el.style.paddingTop = 0;
      el.style.paddingBottom = 0;
    }
  },
 
  "after-leave"(el) {
    el.style.transition = "";
    el.style.height = "";
    el.style.overflow = el.dataset.oldOverflow;
    el.style.paddingTop = el.dataset.oldPaddingTop;
    el.style.paddingBottom = el.dataset.oldPaddingBottom;
  }
};
 
export default {
  name: "collapseTransition",
  functional: true,
  render(h, { children }) {
    const data = {
      on: Transition
    };
    return h("transition", data, children);
  }
};

home.vue

其余剩下的样式自己改动

<template>
  <div class="container">
    <div v-for="(item, index) in list" :key="index">
      <button @click="Active(index)">展开/折叠</button>
      {{ item }}
      <collapse>
        <div v-show="currindex == index ? isActive : ''">
          <div style="border: 1px solid #ddd; padding: 10px">
            <h2>欢迎大家品尝Pizza!</h2>
            <h5>这里有你非常喜欢的Pizza!</h5>
          </div>
        </div>
      </collapse>
    </div>
  </div>
</template>
<script>
import collapse from "../utils/collapse";
export default {
  data() {
    return {
      isActive: false,
      currindex: -1,
      list: [222, 333, 222, 45454, 5666, 777],
    };
  },
  components: {
    collapse,
  },
  methods: {
    Active(index) {
      this.currindex = index;
      this.isActive = !this.isActive;
    },
  },
};
</script>
<style scoped>
.container {
  font-size: 14px;
}
</style>

不用封装来写