From 22271e641e4505ba906c3770905b7e84e3ad8d85 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期二, 02 四月 2024 17:05:57 +0800
Subject: [PATCH] mrshi
---
company/src/components/common/UploadAvatarImage.vue | 49 +++++++++++++++++++++++++++++++++++++++----------
1 files changed, 39 insertions(+), 10 deletions(-)
diff --git a/company/src/components/common/UploadAvatarImage.vue b/company/src/components/common/UploadAvatarImage.vue
index ac31f3c..7d5ddae 100644
--- a/company/src/components/common/UploadAvatarImage.vue
+++ b/company/src/components/common/UploadAvatarImage.vue
@@ -1,6 +1,8 @@
<template>
<div>
<el-upload
+ class="avatar-uploader"
+ accept=".png,.jpg"
:style="customStyle"
:action="uploadImgUrl"
:data="uploadData"
@@ -8,7 +10,7 @@
:on-success="handleAvatarSuccess"
:on-error="uploadError"
:before-upload="beforeAvatarUpload">
- <img v-if="file.imgurlfull" :src="file.imgurlfull" :style="customStyle" class="avatar">
+ <img v-if=" file.imgurlfull" style="width: 100%;" :src="file.imgurlfull" :style="customStyle" class="avatar">
<div v-else :style="customStyle">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="tips-style">{{ tipsLabel }}</div>
@@ -25,12 +27,12 @@
type: Object,
default: () => {}
},
- uploadData: Object,
tipsLabel: '',
customStyle: {
type: String,
default: 'width: 90px; height: 90px;'
- }
+ },
+ uploadData: Object
},
data() {
return {
@@ -48,25 +50,29 @@
this.$message.success('涓婁紶鎴愬姛')
this.$emit('uploadSuccess', { imgurl: data.imgaddr, imgurlfull: data.url, name: data.originname })
} else {
- this.$message.error('涓婁紶澶辫触')
+ this.$tip.apiFailed('涓婁紶澶辫触')
}
this.$emit('uploadEnd')
},
uploadError() {
- this.$message.error('涓婁紶澶辫触')
+ this.$tip.apiFailed('涓婁紶澶辫触')
this.$emit('endUpload')
},
// // 鎷︽埅
beforeAvatarUpload(file) {
this.$emit('uploadBegin')
- return true;
- },
- },
+ return true
+ }
+ }
}
</script>
<style lang="scss" scoped>
-$image-width: 100px;
+$image-width: 90px;
+.avatar-uploader {
+ width: $image-width;
+ height: $image-width;
+}
::v-deep .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
@@ -78,12 +84,16 @@
border-color: #409EFF;
}
.avatar-uploader-icon {
+ line-height: 90px;
font-size: 28px;
color: #8c939d;
- line-height: 90px;
+ width: $image-width;
+ height: $image-width;
text-align: center;
}
.avatar {
+ width: 100% !important;
+ height: auto !important;
display: block;
}
.tips-style {
@@ -94,4 +104,23 @@
line-height: 13px;
}
</style>
+<style lang="scss" scoped>
+::v-deep .el-upload--picture-card{
+ width: 90px !important;
+ height: 90px !important;
+}
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+.icon {
+ -webkit-transform: translate(-50%,-50%);
+ -ms-transform: translate(-50%,-50%);
+ transform: translate(0%, -85%);
+}
+::v-deep .el-upload-list__item {
+ width: 90px !important;
+ height: 90px !important;
+}
+</style>
--
Gitblit v1.9.3