mohadese namavar
39 lines
986 B
Vue
39 lines
986 B
Vue
<template>
|
|
<div class="upload-national-card" @click="showImages">
|
|
<img v-if="source" :src="source" />
|
|
<i v-else class="isax isax-document-upload"></i>
|
|
<input ref="input" type="file" hidden @input="chooseImage">
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const file = defineModel()
|
|
const input = ref()
|
|
const source = ref()
|
|
const filename = ref()
|
|
|
|
const showImages = () => input.value.click();
|
|
|
|
const chooseImage = (e) => {
|
|
const binaryData = [];
|
|
binaryData.push(e.target.files[0]);
|
|
source.value = URL.createObjectURL(new Blob(binaryData, { type: "image" }))
|
|
file.value = e.target.files[0];
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.upload-national-card {
|
|
@apply cursor-pointer min-h-14 h-max relative w-[21.8rem] lg:w-[27.1rem] border border-[#CCCCCC] rounded-[0.6rem] p-4 rtl;
|
|
|
|
i {
|
|
@apply text-xl float-left;
|
|
}
|
|
|
|
|
|
img {
|
|
@apply w-full h-[11.6rem] lg:h-[14.4rem] object-cover object-center rounded-[0.6rem];
|
|
}
|
|
}
|
|
</style> |