vuejs의 arccordion 접기 기능 만들기

안녕하세요, Yo플레입니다.

오늘은 vue.js의 arccordion 접기 기능을 만들어보겠습니다.

상위 컴포넌트인 HelloWorld.vue에서 transition을 이용하여 Arccordion.vue를 조작하는 방법입니다.

예제 보러 가기

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" width="25%">
    <HelloWorld msg="Hello Vue in CodeSandbox!"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

HelloWorld.vue

<template>
  <div class="hello">
    <div class="top-div">Top Div</div>
    <div class="accordion-div">
      <button @click="toggle">Toggle Button</button>
      <transition
        name="myAccordion"
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        class="accordion"
      >
        <MyComp v-if="isActive"></MyComp>
      </transition>
    </div>
    <div class="bottom-div">Bottom Div</div>
  </div>
</template>

<script>
import MyComp from "./MyComp.vue";
export default {
  name: "HelloWorld",
  // props: {
  //   msg: String,
  // },
  data() {
    return {
      isActive: true,
    };
  },
  methods: {
    toggle() {
      this.isActive = !this.isActive;
    },
    beforeEnter: function (el) {
      el.style.height = "0";
    },
    enter: function (el) {
      el.style.height = el.scrollHeight + "px";
    },
    beforeLeave: function (el) {
      el.style.height = el.scrollHeight + "px";
    },
    leave: function (el) {
      el.style.height = "0";
    },
  },
  components: {
    MyComp: MyComp,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello > div {
  border: 1px solid black;
}
.accordion-div {
  padding: 10px;
  background-color: red;
}
</style>

MyComp.vue

<template>
  <div class="accordion">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam et
      doloribus porro voluptatum? Earum eaque aut incidunt ducimus, eum in
      nostrum numquam tenetur odio voluptas deserunt, quas dolorum mollitia
      officia?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto blanditiis
      numquam omnis qui nesciunt quam eum quae assumenda sequi voluptatibus
      accusamus voluptas ratione, minus quis earum magni vero? Temporibus,
      ipsum.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam suscipit
      soluta fugit, nostrum quam numquam. Dolorem quam nihil enim eum vitae odio
      reiciendis animi tempore. Quas magni pariatur voluptatibus consequuntur.
    </p>
  </div>
</template>

<script>
export default {};
</script>

<style>
.accordion {
  text-align: left;
}
</style>