fifi97
80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
|
|
<transition name="modal-fade">
|
|
<div v-if="showModal" class=" overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
|
|
<div class="relative w-1/3 my-6 mx-auto max-w-6xl">
|
|
<!--content-->
|
|
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
|
|
<!--header-->
|
|
<!--body-->
|
|
<div class="relative p-6 flex-auto">
|
|
|
|
<h3 class="text-center text-3xl font-semibold mb-4">
|
|
Komen
|
|
</h3>
|
|
|
|
<input id="frminput" autofocus type="text" ref="btnDropdownRef" class="mr-2 bg-white appearance-none border-2 border-gray-400 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500 border-black" />
|
|
|
|
</div>
|
|
<!--footer-->
|
|
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
|
|
<button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" @click="toggleModal" type="button">
|
|
Batal
|
|
</button>
|
|
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="toggleModal" type="button" >
|
|
Lulus
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
<transition
|
|
enter-active-class="transition-all transform duration-200 ease-out"
|
|
>
|
|
</transition>
|
|
|
|
<div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { createPopper } from "@popperjs/core";
|
|
|
|
export default {
|
|
|
|
props: {
|
|
placement: {
|
|
type: String,
|
|
default: "bottom-start"
|
|
}
|
|
},
|
|
name: "komen-modal",
|
|
data() {
|
|
return {
|
|
showModal: false,
|
|
kodcaw: ''
|
|
}
|
|
},
|
|
methods: {
|
|
toggleModal: function(){
|
|
this.showModal = false;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.modal-fade-enter,
|
|
.modal-fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
.modal-fade-enter-active,
|
|
.modal-fade-leave-active {
|
|
transition: opacity .5s ease;
|
|
}
|
|
</style> |