%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div v-if="value == true"
class="modal fixed z-50 bottom-0 left-0 w-full h-screen">
<div @click="closeModal"
:class="isActive == true ? 'opacity-100' : 'opacity-0'"
class="absolute z-10 top-0 left-0 w-full h-full bg-black bg-opacity-25 cursor-pointer transition duration-100"></div>
<div
:class="isActive == true ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'"
class="relative z-20 h-full bg-white shadow-lg p-10 pt-16 transition transform duration-100">
<button @click="closeModal"
class="absolute top-6 right-10 uppercase hover:text-blue-light focus:outline-none transition"
type="button">Close</button>
<div class="relative h-full overflow-y-auto">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Modal',
props: {
value: {
required: true
},
title: {
type: String,
required: false
},
background: {
type: String,
required: false,
default: 'bg-gray'
}
},
data() {
return {
isActive: false
}
},
methods: {
closeModal: function () {
this.$emit("input", !this.value);
}
},
watch: {
value: function () {
if(this.value == true) {
setTimeout(() => {
this.isActive = true;
}, 100)
} else {
setTimeout(() => {
this.isActive = false;
}, 100)
}
}
}
}
</script>
<style lang="postcss" scoped>
.modal {
padding-top: 25vh;
}
</style>
Zerion Mini Shell 1.0