vue modal, slot, transition

https://vuejs.org/examples/#modal

Vue.js

 

vue에서는 공식적으로 지원하는 모달이 있다. 뷰에서는 애니메이션과 트랜지션을 라이브러리단에서 지원한다. 그래서 간단히 class에 맞춰 넣기만 해도 사용할 수 있다.

 

slot을 사용할 때에는 사용하려는 컴포넌트 태그로 감싸서 일반태그에 slot을 넣어주거나, template #namedm로 사용할 수 있다.

<template>
    <div>
        <input type="text" v-model="newTodoItem">
        <button @click="addTodo"> add</button>
        <VModal v-bind:show="showModal" v-on:close="closeModal">
            <h4 slot="body">경고!</h4>
            <!--
                <template #body>
                    <h4>경고!</h4>
                </template>
            -->
        </VModal>
    </div>

</template>

 

 

 

Transition 사용해보기

개발자로써 css를 사용해 부드러운 화면을 만드는 것은 늘 어려운 일이다. vue에서는 이런 트랜지션을 사용하기 편하게 라이브러리 단에서 제공하고 있다.

https://ko.vuejs.org/guide/built-ins/transition-group

Vue.js

 

<template>
    <div>
    		<TransitionGroup name="list" tag="ul">
                <li v-for="(item,index) in propsData" v-bind:key="item.item">
                    <div v-on:click="toggleComplete(item, index)" v-bind:class="{good : item.completed}">췍</div>
                    {{ item.item }}
                    <button type="button" v-on:click="remove(item,index)">삭제</button>
                </li>
            </TransitionGroup>
    </div>
</template>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

 

간단히 이런느낌으로 가능한데 <TransitionGroup> 태그의 name에 주목할 필요가 있다.

<TransitionGroup name="list" tag="ul">

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

 

name="list"인 부분으로 인해 style에서 list로 시작되는 부분의 css들이 적용된다. 이런 부분이 vue에서 제공하는 transition의 강점이라 볼 수 있다.

문서를 보면 Enter와 Leave에 맞춰 사용할 수 있다.

 

tag는 ul로 만들어진다고 보면된다.