|
|
|
@ -4,13 +4,12 @@
|
|
|
|
|
由于我在使用时它只有vue@1版本,而且有些业务的需求耦合到七牛等等原因吧,自己改造了一下,如果大家要使用的话,优先还是使用官方component
|
|
|
|
|
</code>
|
|
|
|
|
|
|
|
|
|
<PanThumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
|
|
|
|
|
<PanThumb :image='image'>
|
|
|
|
|
</PanThumb>
|
|
|
|
|
<el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
|
|
|
|
|
</el-button>
|
|
|
|
|
|
|
|
|
|
<ImageCropper :width="300" :height="300" url="https://httpbin.org/post" @crop-upload-success="cropSuccess" :key="imagecropperKey"
|
|
|
|
|
v-show="imagecropperShow" />
|
|
|
|
|
<ImageCropper :width="300" :height="300" url="https://httpbin.org/post" @crop-upload-success="cropSuccess" :key="imagecropperKey" v-show="imagecropperShow" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
@ -21,13 +20,15 @@
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
imagecropperShow: false,
|
|
|
|
|
imagecropperKey: 0
|
|
|
|
|
imagecropperKey: 0,
|
|
|
|
|
image: 'https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
cropSuccess() {
|
|
|
|
|
cropSuccess(resData) {
|
|
|
|
|
this.imagecropperShow = false;
|
|
|
|
|
this.imagecropperKey = this.imagecropperKey + 1;
|
|
|
|
|
this.image = resData.files.avatar;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|