76 lines
1.6 KiB
Vue
76 lines
1.6 KiB
Vue
<template lang="pug">
|
|
.flex.flex-col.items-center.justify-center(
|
|
:style="{padding: '153px 370px'}"
|
|
)
|
|
.avatar-wrapper.flex.relative
|
|
base-input(
|
|
circle,
|
|
type="file",
|
|
id="image-upload",
|
|
accept="image/.jpg,.jpeg,.png, .jpg",
|
|
@change="(e)=>previewImage(e)",
|
|
)
|
|
.avatar.flex.absolute.items-center.gap-x-6
|
|
img.avatar.object-cover(for="image-upload", :src="image")
|
|
q-btn(
|
|
round,
|
|
color="primary",
|
|
@click="confirm",
|
|
icon="app:icon-ok"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
import BaseInput from "./BaseInput.vue";
|
|
import addImageIcon from "@/assets/icons/photo.svg";
|
|
import { v_model } from "@/shared/mixins/v-model";
|
|
|
|
export default {
|
|
name: "BaseModalUploadPhoto",
|
|
components: { BaseInput, addImageIcon },
|
|
data() {
|
|
return {
|
|
image: addImageIcon,
|
|
};
|
|
},
|
|
mixins: [v_model],
|
|
props: {
|
|
confirmUpload: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
},
|
|
methods: {
|
|
previewImage(event) {
|
|
let picture = event.target.files;
|
|
let reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
this.image = e.target.result;
|
|
};
|
|
reader.readAsDataURL(picture[0]);
|
|
this.imageData = [...event.target.files];
|
|
},
|
|
confirm() {
|
|
this.value.file = this.imageData;
|
|
this.value.photo = this.image;
|
|
this.confirmUpload();
|
|
},
|
|
},
|
|
created() {
|
|
if (this.value?.photo) {
|
|
this.image = this.value.photo;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.avatar-wrapper
|
|
width: 400px
|
|
height: 400px
|
|
border-radius: 50%
|
|
.avatar
|
|
height: 100%
|
|
border-radius: 50%
|
|
</style>
|