seepur/resources/scripts/applications/home/components/ChangeAvatarModal.vue

43 lines
885 B
Vue

<template>
<Modal
title="Change Avatar"
:isActive="isActive"
acceptText="Update"
rejectText="Cancel"
@accept="emitAvatarChange()"
@close="onColse()"
>
<ImagePicker ref="imagePicker" :initialImage="defaultImage" />
</Modal>
</template>
<script lang="ts">
import Modal from "../../shared/components/Modal/Modal.vue";
import ImagePicker from "./ImagePicker.vue";
export default {
name: "ChangeAvatarModal",
components: {
Modal,
ImagePicker
},
props: ["isActive", "defaultImage"],
data() {
return {};
},
methods: {
onColse() {
this.$emit("onClose");
},
emitAvatarChange() {
const event = {
isDefaultImage: this.$refs.imagePicker.isDefaultImage,
image: this.$refs.imagePicker.generateDataUrl("image/png", 0.8)
};
this.$emit("onAvatarSelected", event);
}
}
};
</script>