You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and dots ('.'), can be up to 35 characters long. Letters must be lowercase.
38 lines
1.0 KiB
38 lines
1.0 KiB
<script setup> |
|
import { reactive } from 'vue'; |
|
import PanelCreate from './PanelCreate.vue'; |
|
|
|
const imageState = reactive({ |
|
"url": "", |
|
}) |
|
|
|
const emits = defineEmits(["close", "data"]); |
|
|
|
const imageAdded = (file) => { |
|
imageState.url = file.url; |
|
} |
|
|
|
const imageRemoved = (file) => { |
|
imageState.url = ""; |
|
} |
|
|
|
</script> |
|
|
|
<template> |
|
<div class="text-left text-black w-[30rem] shadow-2xl rounded-lg bg-gray-50 overflow-hidden |
|
border border-gray-300"> |
|
<div v-if="imageState.url" class="max-h-72 overflow-hidden flex items-center"> |
|
<img :src="imageState.url"> |
|
</div> |
|
<div class="px-10 pb-5 pt-5"> |
|
<div @click="() => emits('close')" class="w-full flex justify-end "> |
|
<img src="/icons/cancel.svg" class="h-7 hover:bg-black/10 rounded-md p-1"> |
|
</div> |
|
<PanelCreate |
|
@file-added="imageAdded" |
|
@file-removed="imageRemoved" |
|
@close="emits('close')" |
|
/> |
|
</div> |
|
</div> |
|
</template> |