style: 优化头像裁剪框样式
This commit is contained in:
Charles7c
parent
be4c3376dd
commit
28f4791833
6
continew-admin-ui/pnpm-lock.yaml
generated
6
continew-admin-ui/pnpm-lock.yaml
generated
@ -60,7 +60,7 @@ dependencies:
|
||||
version: 3.3.4
|
||||
vue-cropper:
|
||||
specifier: ^1.0.9
|
||||
version: 1.0.9
|
||||
version: 1.1.1
|
||||
vue-echarts:
|
||||
specifier: ^6.6.1
|
||||
version: 6.6.1(echarts@5.4.3)(vue@3.3.4)
|
||||
@ -9872,6 +9872,10 @@ packages:
|
||||
fsevents: 2.3.2
|
||||
dev: true
|
||||
|
||||
/vue-cropper@1.1.1:
|
||||
resolution: {integrity: sha512-WsqKMpaBf9Osi1LQlE/5AKdD0nHWOy1asLXocaG8NomOWO07jiZi968+/PbMmnD0QbPJOumDQaGuGa13qys85A==}
|
||||
dev: false
|
||||
|
||||
/vue-demi@0.13.11(vue@3.3.4):
|
||||
resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
overflow: hidden;
|
||||
.tags-wrap {
|
||||
padding: 4px 0;
|
||||
height: 48px;
|
||||
height: 42px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
|
||||
|
||||
@ -20,40 +20,35 @@
|
||||
</a-avatar>
|
||||
</template>
|
||||
</a-upload>
|
||||
|
||||
<div class="main">
|
||||
<a-modal
|
||||
:visible="cropperVisible"
|
||||
width="40%"
|
||||
:title="$t('userCenter.panel.avatar.upload')"
|
||||
:visible="visible"
|
||||
:width="400"
|
||||
:footer="false"
|
||||
unmount-on-close
|
||||
render-to-body
|
||||
@cancel="handleCropperCancel"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-row>
|
||||
<a-col :span="14">
|
||||
<div style="width: 370px; height: 370px">
|
||||
<!-- 头像裁剪框 -->
|
||||
<a-col :span="14" style="width: 200px; height: 200px">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:info="true"
|
||||
ref="cropperRef"
|
||||
:img="options.img"
|
||||
:full="options.full"
|
||||
:fixed="options.fixed"
|
||||
:fixed-box="options.fixedBox"
|
||||
:can-move="options.canMove"
|
||||
:center-box="options.centerBox"
|
||||
:info="true"
|
||||
:auto-crop="options.autoCrop"
|
||||
:auto-crop-width="options.autoCropWidth"
|
||||
:auto-crop-height="options.autoCropHeight"
|
||||
:fixed-box="options.fixedBox"
|
||||
:fixed="options.fixed"
|
||||
:full="options.full"
|
||||
:center-box="options.centerBox"
|
||||
:can-move="options.canMove"
|
||||
:output-type="options.outputType"
|
||||
:output-size="options.outputSize"
|
||||
@realTime="realTime"
|
||||
@real-time="handleRealTime"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<!-- 实时预览 -->
|
||||
<a-col :span="10" style="display: flex; justify-content: center">
|
||||
<div :style="previewStyle">
|
||||
<div :style="previews.div">
|
||||
<img :src="previews.url" :style="previews.img" alt="" />
|
||||
@ -61,15 +56,13 @@
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<br />
|
||||
<div style="text-align: center; padding-top: 30px">
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleUpload">提交</a-button>
|
||||
<a-button type="outline" @click="handleCropperCancel"
|
||||
>取消</a-button
|
||||
>
|
||||
<a-button type="primary" @click="handleUpload">确定</a-button>
|
||||
<a-button @click="handleCancel">取消</a-button>
|
||||
</a-space>
|
||||
</a-modal>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<a-descriptions
|
||||
:column="2"
|
||||
@ -122,19 +115,18 @@
|
||||
import { reactive, ref, getCurrentInstance } from 'vue';
|
||||
import { FileItem } from '@arco-design/web-vue';
|
||||
import { uploadAvatar, cropperOptions } from '@/api/system/user-center';
|
||||
import getAvatar from '@/utils/avatar';
|
||||
import { useUserStore } from '@/store';
|
||||
import getAvatar from '@/utils/avatar';
|
||||
import { VueCropper } from 'vue-cropper';
|
||||
import 'vue-cropper/dist/index.css';
|
||||
|
||||
const fileRef = ref(reactive({ name: 'avatar.png' }));
|
||||
const previews: any = ref({});
|
||||
const previewStyle: any = ref({});
|
||||
const cropperVisible = ref(false);
|
||||
const cropper = ref();
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const userStore = useUserStore();
|
||||
|
||||
const cropperRef = ref();
|
||||
const visible = ref(false);
|
||||
const previews: any = ref({});
|
||||
const previewStyle: any = ref({});
|
||||
const fileRef = ref(reactive({ name: 'avatar.png' }));
|
||||
const avatar = {
|
||||
uid: '-2',
|
||||
name: 'avatar.png',
|
||||
@ -143,15 +135,15 @@
|
||||
const avatarList = ref<FileItem[]>([avatar]);
|
||||
|
||||
const options: cropperOptions = reactive({
|
||||
autoCrop: true,
|
||||
autoCropWidth: 200,
|
||||
autoCropHeight: 200,
|
||||
canMove: true,
|
||||
centerBox: true,
|
||||
full: false,
|
||||
fixed: false,
|
||||
fixedBox: false,
|
||||
img: '',
|
||||
autoCrop: true,
|
||||
autoCropWidth: 160,
|
||||
autoCropHeight: 160,
|
||||
fixedBox: true,
|
||||
fixed: true,
|
||||
full: false,
|
||||
centerBox: true,
|
||||
canMove: true,
|
||||
outputSize: 1,
|
||||
outputType: 'png',
|
||||
});
|
||||
@ -168,46 +160,47 @@
|
||||
reader.onload = () => {
|
||||
options.img = reader.result;
|
||||
};
|
||||
cropperVisible.value = true;
|
||||
visible.value = true;
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭裁剪框
|
||||
*/
|
||||
const handleCropperCancel = () => {
|
||||
const handleCancel = () => {
|
||||
fileRef.value = { name: '' };
|
||||
options.img = '';
|
||||
cropperVisible.value = false;
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传头像
|
||||
*/
|
||||
const handleUpload = () => {
|
||||
cropper.value.getCropBlob((data: string | Blob) => {
|
||||
cropperRef.value.getCropBlob((data: string | Blob) => {
|
||||
const formData = new FormData();
|
||||
formData.append('avatarFile', data, fileRef.value?.name);
|
||||
uploadAvatar(formData).then((res) => {
|
||||
userStore.avatar = res.data.avatar;
|
||||
avatarList.value[0].url = getAvatar(res.data.avatar, undefined);
|
||||
proxy.$message.success(res.msg);
|
||||
handleCropperCancel();
|
||||
handleCancel();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 实时预览
|
||||
* @param data data
|
||||
*
|
||||
* @param data data 预览图像
|
||||
*/
|
||||
const realTime = (data: any) => {
|
||||
const handleRealTime = (data: any) => {
|
||||
previewStyle.value = {
|
||||
width: `${data.w}px`,
|
||||
height: `${data.h}px`,
|
||||
overflow: 'hidden',
|
||||
margin: '0',
|
||||
zoom: 0.8,
|
||||
zoom: 100 / data.h,
|
||||
borderRadius: '50%',
|
||||
};
|
||||
previews.value = data;
|
||||
@ -231,8 +224,4 @@
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,6 +6,7 @@ export default {
|
||||
|
||||
// user-panel
|
||||
'userCenter.panel.avatar': 'Avatar',
|
||||
'userCenter.panel.avatar.upload': 'Upload Avatar',
|
||||
'userCenter.panel.label.nickname': 'Nick Name :',
|
||||
'userCenter.panel.label.gender': 'Gender :',
|
||||
'userCenter.panel.label.phone': 'Phone :',
|
||||
|
||||
@ -6,6 +6,7 @@ export default {
|
||||
|
||||
// user-panel
|
||||
'userCenter.panel.avatar': '头像',
|
||||
'userCenter.panel.avatar.upload': '上传头像',
|
||||
'userCenter.panel.label.nickname': '昵称 :',
|
||||
'userCenter.panel.label.gender': '性别 :',
|
||||
'userCenter.panel.label.phone': '手机号码 :',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user