therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add avatar crop popup

Browse source
This commit is contained in:
taehoon 2019-02-07 03:05:59 -05:00
parent 4f95371081
commit 13725f040b
11 changed files with 306 additions and 1118 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/image_cropper/image_cropper.vue Normal file
View file

@ -0,0 +1,39 @@
<template>
<div class="image-cropper">
<modal :show="dataUrl" :title="title" @close="destroy">
<div class="modal-body">
<div class="image-cropper-image-container">
<img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
</div>
</div>
<div class="modal-footer">
<button class="btn image-cropper-btn" type="button" @click="submit" v-text="saveButtonLabel"></button>
</div>
</modal>
<input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
</div>
</template>
<script src="./image_cropper.js"></script>
<style lang="scss">
.image-cropper {
&-img-input {
display: none;
}
&-image-container {
position: relative;
img {
display: block;
max-width: 100%;
}
}
&-btn {
display: block;
width: 100%;
}
}
</style>