80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<transition
|
|
enter-class="opacity-0"
|
|
enter-active-class="ease-out transition"
|
|
enter-to-class="opacity-100"
|
|
leave-class="opacity-100"
|
|
leave-active-class="ease-out transition"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div
|
|
v-if="show"
|
|
class="inset-0 transition-opacity z-20 fixed"
|
|
@keydown.esc="close()"
|
|
>
|
|
<div
|
|
class="bg-primaryDark opacity-75 inset-0 absolute"
|
|
tabindex="0"
|
|
@click="close()"
|
|
></div>
|
|
</div>
|
|
</transition>
|
|
<aside
|
|
class="
|
|
bg-primary
|
|
flex flex-col
|
|
h-full
|
|
max-w-full
|
|
shadow-xl
|
|
transform
|
|
transition
|
|
top-0
|
|
ease-in-out
|
|
right-0
|
|
w-96
|
|
z-30
|
|
duration-300
|
|
fixed
|
|
overflow-auto
|
|
"
|
|
:class="show ? 'translate-x-0' : 'translate-x-full'"
|
|
>
|
|
<slot name="content"></slot>
|
|
</aside>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
required: true,
|
|
default: false,
|
|
},
|
|
},
|
|
watch: {
|
|
show: {
|
|
immediate: true,
|
|
handler(show) {
|
|
if (process.client) {
|
|
if (show) document.body.style.setProperty("overflow", "hidden")
|
|
else document.body.style.removeProperty("overflow")
|
|
}
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.keyCode === 27 && this.show) this.close()
|
|
})
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.$emit("close")
|
|
},
|
|
},
|
|
}
|
|
</script>
|