huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-26 17:21:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

修复头像上传成功二次打开无法改变裁剪框大小和位置问题

Browse Source
This commit is contained in:
RuoYi 2020-06-24 15:59:18 +08:00
parent eac9403ea4
commit 5d5f955a34
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ruoyi-ui/src/views/system/user/profile/userAvatar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" /> <img v-bind:src="options.img" @click="editCropper()" title="点击上传头像" class="img-circle img-lg" />
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened">
<el-row> <el-row>
<el-col :xs="24" :md="12" :style="{height: '350px'}"> <el-col :xs="24" :md="12" :style="{height: '350px'}">
<vue-cropper <vue-cropper
@ -13,6 +13,7 @@
:autoCropHeight="options.autoCropHeight" :autoCropHeight="options.autoCropHeight"
:fixedBox="options.fixedBox" :fixedBox="options.fixedBox"
@realTime="realTime" @realTime="realTime"
v-if="visible"
/> />
</el-col> </el-col>
<el-col :xs="24" :md="12" :style="{height: '350px'}"> <el-col :xs="24" :md="12" :style="{height: '350px'}">
@ -67,6 +68,8 @@ export default {
return { return {
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 是否显示cropper
visible: false,
// 弹出层标题 // 弹出层标题
title: "修改头像", title: "修改头像",
options: { options: {
@ -84,6 +87,10 @@ export default {
editCropper() { editCropper() {
this.open = true; this.open = true;
}, },
// 打开弹出层结束时的回调
modalOpened() {
this.visible = true;
},
// 覆盖默认的上传行为 // 覆盖默认的上传行为
requestUpload() { requestUpload() {
}, },
@ -121,9 +128,10 @@ export default {
if (response.code === 200) { if (response.code === 200) {
this.open = false; this.open = false;
this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl; this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
store.commit('SET_AVATAR', this.options.img);
this.msgSuccess("修改成功"); this.msgSuccess("修改成功");
} }
this.$refs.cropper.clearCrop(); this.visible = false;
}); });
}); });
}, },