Vue.js 전환 참조

이 기사에서는 vuejs 전환 구성 요소를 사용하여 왼쪽에서 오른쪽으로 애니메이션으로 서랍을 만드는 방법 개념을 공유합니다.

1. components 폴더에 Drawer.vue라는 이름의 Drawer Component를 생성한 후 코드를 붙여 넣습니다.

<template>
  <transition name="slide">
    <div class="drawer" v-if="open">
      <ul>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer">Home</a>
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer">About</a>
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer"
            >Portfolio</a
          >
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer"
            >Contact</a
          >
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
export default {
  name: "drawer",
  props: ["open"],
  created() {
    console.log("props: ", this.open);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.drawer {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(228, 70, 70, 0.7);
  z-index: 2;
  overflow-y: hidden;
  padding: 1em;
}

.drawer ul li {
  margin: 0;
  list-style: none;
  text-align: center;
  margin: 1em;
}

.drawer ul li a {
  text-decoration: none;
  color: white;
}

.slide-enter-active {
  transition: all 0.7s ease;
  transform: translateX(-90%);
  opacity: 1;
}

.slide-enter-to {
  transition: all 0.7s ease;
  transform: translateX(0%);
}

.slide-leave-active {
  transition: all 0.7s ease;
  transform: translateX(-30%);
  opacity: 0;
}
</style>

2. App.vue 구성 요소에서 Drawer.vue 구성 요소를 가져오고 사용합니다. 서랍 구성 요소를 전환하는 버튼도 만듭니다. App.vue에서 아래 코드를 참조하세요.

<template>
  <div class="main">
    <Drawer :open="open" />

    <button @click="open = !open">Toggle Drawer</button>
  </div>
</template>

<script>
import Drawer from "./components/Drawer";
export default {
  name: "App",
  data: function () {
    return {
      open: true,
    };
  },
  components: {
    Drawer,
  },
};
</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;
}

button {
  background: crimson;
  color: white;
  padding: 1em;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>

그리고 그게 다야. 전환 구성 요소에 내장된 vuejs 및 vue js로 멋진 Drawer 구성 요소를 만들었습니다 🚀

아래에서 전체 프로젝트를 찾을 수 있습니다 👇

See in code sandbox

감사합니다 😊