mohadese namavar
82 lines
2.4 KiB
Vue
82 lines
2.4 KiB
Vue
<template>
|
|
<div class="seller-upload-image">
|
|
<div v-if="!source" @drop.prevent="chooseImage('dataTransfer', $event)" @dragover.prevent>
|
|
<i class="isax isax-gallery-export"></i>
|
|
<p>{{ 'cover' in $attrs ? $t('coverImage') : ' ' }}</p>
|
|
<h2>{{ $t('forUploadImages') }} </h2>
|
|
<span @click="showImages()">{{ $t('clickHere') }}</span>
|
|
</div>
|
|
<div v-else>
|
|
<img :src="source" />
|
|
<Button :label="$t('placement')" severity="secondary" text raised @click="showImages()" />
|
|
<Button :label="$t('delete')" severity="secondary" text raised @click="deleteImage()" />
|
|
</div>
|
|
<input ref="input" type="file" hidden @input="chooseImage('target', $event)">
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const image = defineModel()
|
|
const input = ref()
|
|
const source = ref()
|
|
|
|
const showImages = () => input.value.click();
|
|
const deleteImage = () => {
|
|
image.value = null
|
|
source.value = null
|
|
input.value.value = null
|
|
}
|
|
const chooseImage = (name, e) => {
|
|
const binaryData = [];
|
|
binaryData.push(e[name].files[0]);
|
|
source.value = URL.createObjectURL(new Blob(binaryData, { type: "image" }))
|
|
image.value = e[name].files[0];
|
|
}
|
|
|
|
onMounted(() => {
|
|
if(image.value) source.value = image.value
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.seller-upload-image {
|
|
@apply w-[21.4rem] h-[21.4rem] lg:w-[24.8rem] lg:h-[24.8rem] bg-white;
|
|
|
|
&>div:not(:has(img)) {
|
|
@apply h-full flex flex-col justify-center items-center border border-[#47B556] border-dashed rounded-[0.6rem];
|
|
|
|
|
|
i {
|
|
@apply text-[3.1em] lg:text-[3.8em] text-[#47B556];
|
|
}
|
|
|
|
p {
|
|
@apply text-[#7F7F7F] text-[0.6em] lg:text-sm font-medium font-vazir mt-6;
|
|
}
|
|
|
|
h2 {
|
|
@apply text-[#333333] text-sm lg:text-lg font-medium font-vazir mt-1.5;
|
|
}
|
|
|
|
span {
|
|
@apply text-[#47B556] text-sm lg:text-lg font-medium font-vazir cursor-pointer;
|
|
}
|
|
}
|
|
|
|
&>div:has(img) {
|
|
@apply h-full flex flex-col gap-3 justify-center items-center relative;
|
|
|
|
img {
|
|
@apply h-full w-full absolute object-cover rounded-[0.6rem];
|
|
}
|
|
|
|
button {
|
|
@apply w-[7.5rem] h-[3.1rem] bg-white z-[1];
|
|
}
|
|
|
|
&::after{
|
|
@apply bg-[#47B556]/20 absolute content-['_'] inset-0 rounded-[0.6rem];
|
|
}
|
|
}
|
|
}
|
|
</style> |