43 lines
885 B
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>
|