62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<template>
|
|
<div class="components-container">
|
|
<aside>This is based on
|
|
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
|
|
Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.
|
|
</aside>
|
|
|
|
<pan-thumb :image="image" />
|
|
|
|
<el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
|
|
Change Avatar
|
|
</el-button>
|
|
|
|
<image-cropper
|
|
v-show="imagecropperShow"
|
|
:key="imagecropperKey"
|
|
:width="300"
|
|
:height="300"
|
|
url="https://httpbin.org/post"
|
|
lang-type="en"
|
|
@close="close"
|
|
@crop-upload-success="cropSuccess"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ImageCropper from '@/components/ImageCropper'
|
|
import PanThumb from '@/components/PanThumb'
|
|
|
|
export default {
|
|
name: 'AvatarUploadDemo',
|
|
components: { ImageCropper, PanThumb },
|
|
data() {
|
|
return {
|
|
imagecropperShow: false,
|
|
imagecropperKey: 0,
|
|
image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
|
|
}
|
|
},
|
|
methods: {
|
|
cropSuccess(resData) {
|
|
this.imagecropperShow = false
|
|
this.imagecropperKey = this.imagecropperKey + 1
|
|
this.image = resData.files.avatar
|
|
},
|
|
close() {
|
|
this.imagecropperShow = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.avatar {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
|