<template>
- <div class="border-white">
- <div v-if="isShow" class="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50">
- <!-- modal -->
- <div class="bg-white rounded shadow-lg w-6/12">
- <!-- modal header -->
- <div class="border-b px-4 py-2 flex justify-between items-center">
- <h2 class="font-semibold text-lg">{{title}}</h2>
- <button class="text-black" @click="show">✗</button>
- </div>
- <!-- modal body -->
- <div class="p-1">
- <ul class="select_box overflow-auto max-h-96">
- <li class="hover:bg-indigo-200" v-for="head in lists" :key="head.id" @click="onSelected(head)">{{head.name}}</li>
- </ul>
- </div>
- <div class="flex justify-end items-center w-100 border-t p-3">
- <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white mr-1" @click="show">Close</button>
+ <transition name="selectPanel">
+ <div class="border-white" v-if="isShow">
+ <div class="h-screen w-full fixed left-0 top-0 flex justify-center items-center bg-black bg-opacity-50 modal-full">
+ <!-- modal -->
+ <div class="bg-white rounded shadow-lg w-6/12 modal-panel">
+ <!-- modal header -->
+ <div class="border-b px-4 py-2 flex justify-between items-center">
+ <h2 class="font-semibold text-lg">{{title}}</h2>
+ <button class="text-black" @click="show">✗</button>
+ </div>
+ <!-- modal body -->
+ <div class="p-1">
+ <ul class="select_box overflow-auto max-h-96">
+ <li class="hover:bg-indigo-200" v-for="head in lists" :key="head.id" @click="onSelected(head)">{{head.name}}</li>
+ </ul>
+ </div>
+ <div class="flex justify-end items-center w-100 border-t p-3">
+ <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-white mr-1" @click="show">Close</button>
+ </div>
</div>
</div>
</div>
- </div>
+ </transition>
</template>
<script>
.select_box {
border: 1px solid #c5c5c5;
}
+
+.modal-full {
+}
+
+.modal-panel {
+}
+
.select_box li {
cursor: default;
box-sizing: border-box;
padding: 2px 10px;
}
+
+.selectPanel-enter-active,
+.selectPanel-leave-active {
+ transition: opacity 0.5s;
+}
+.selectPanel-enter,
+.selectPanel-leave-to {
+ opacity: 0;
+}
+.selectPanel-enter-active > .modal-full > .modal-panel,
+.selectPanel-leave-active > .modal-full > .modal-panel {
+ transition: all 0.5s;
+}
+.selectPanel-enter > .modal-full > .modal-panel {
+ transform: translateX(-100%);
+}
+.selectPanel-leave-to > .modal-full > .modal-panel {
+ transform: translateX(100%);
+}
</style>