refine avatarUpload demo
This commit is contained in:
parent
dfd7ce8d40
commit
b2af2ddf02
2 changed files with 7 additions and 6 deletions
|
@ -694,7 +694,7 @@
|
|||
// 上传成功
|
||||
function(resData) {
|
||||
that.loading = 2;
|
||||
that.$emit('crop-upload-success', url);
|
||||
that.$emit('crop-upload-success', resData);
|
||||
},
|
||||
// 上传失败
|
||||
function(sts) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue