You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.0 KiB
52 lines
1.0 KiB
4 weeks ago
|
<template>
|
||
|
|
<Teleport to="body">
|
||
|
|
<Transition name="fade">
|
||
|
|
<div
|
||
|
|
v-if="isOpen"
|
||
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/90"
|
||
|
|
@click="close"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
class="absolute top-4 right-4 text-white text-2xl p-2 rounded-full hover:bg-white/10"
|
||
|
|
@click="close"
|
||
|
|
>
|
||
|
|
<fa icon="xmark" />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<img
|
||
|
|
:src="imageUrl"
|
||
|
|
class="max-h-screen max-w-screen-md w-full object-contain p-4"
|
||
|
|
@click.stop
|
||
|
|
alt="expanded shared content"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</Transition>
|
||
|
|
</Teleport>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Component, Vue, Prop } from "vue-facing-decorator";
|
||
|
|
|
||
|
|
@Component
|
||
|
|
export default class ImageViewer extends Vue {
|
||
|
|
@Prop() imageUrl!: string;
|
||
|
|
@Prop() isOpen!: boolean;
|
||
|
|
|
||
|
|
close() {
|
||
|
|
this.$emit("update:isOpen", false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.fade-enter-active,
|
||
|
|
.fade-leave-active {
|
||
|
|
transition: opacity 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fade-enter-from,
|
||
|
|
.fade-leave-to {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
</style>
|