vue+element 上传组件的封装
个人感觉没有啥好说的,直接附上代码
父组件:
import UploadPhoto from '../components/storeManagement/UploadPhoto'
子组件:
:on-close="()=>{this.centerDialogVisible = false}" v-if="centerDialogVisible" :url-list="dialogImageUrl" :hide-on-click-modal="true" >
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
name: "UploadPhoto",
components: {
ElImageViewer,
},
props: ['imgNum', 'defaultList'],
data() {
return {
uploadList: [
{image: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg', desc: "门店全景照"},
{image: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', desc: "收银台照"}
],
dialogImageUrl: [],
centerDialogVisible:false,
}
},
created() {
this.defaultList.forEach((item) => {
this.uploadList.push({item})
})
},
mounted(){
},
methods: {
handleAvatarSuccess(res, file) {
this.uploadList.push(URL.createObjectURL(file.raw))
this.$emit('imgUpload', this.uploadList)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
removeImage(item){
this.$emit('imgUpload', this.uploadList)
},
watchImg(image){
this.centerDialogVisible = true
this.dialogImageUrl=[image]
}
},
}
.upload-photo-wrapper {
width: 100%;
height:100%;
background: #F9FAFB;
border-radius: 8px;
position: relative;
padding: 0 16px 0px 0;
margin-bottom: 23px;
.menu-list-data {
width: 100%;
height:100%;
display: flex;
.item-list {
display: flex;
overflow: hidden;
font-family: PingFangSC-Medium, PingFang SC;
.item {
width: 85px;
padding: 5px 0 0 0;
display: flex;
flex-direction: column;
margin-right: 16px;
box-sizing: border-box;
.image-wrapper {
display: block;
width: 80px;
height: 80px;
background: #f9fafb;
position: relative;
border-radius: 8px;
&.active:hover .watch{
transform: translateY(0%);
}
&:hover .delete{
display: block;
}
.watch{
width: 80px;
height: 80px;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
cursor: pointer;
transform: translateY(400%);
display: flex;
align-items: center;
justify-content: center;
transition: all .6s;
z-index: 1;
border-radius: 8px;
}
.watch-img {
color: #fff;
width: 16px;
height: 16px;
text-align: center;
line-height: 16px;
}
/*.delete-img {
width: 20px;
height: 20px;
position:absolute;
top:-14px;
right:-10px;
}*/
.delete {
display: none;
width: 32px;
height: 32px;
cursor: pointer;
position:absolute;
top:-14px;
right:-20px;
z-index:80;
.delete-img {
width: 20px;
height: 20px;
z-index:99;
}
}
.image {
width: 100%;
height: 100%;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
.image-slot{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
i{
color: #888B93;
width: 100%;
text-align: center;
}
p{
width: 100%;
font-size: 12px;
text-align: center;
color: #888B93;
}
}
}
}
}
}
}
.uploader {
margin-top: 5px;
}
.tip {
font-size: 11px;
transform: scale(0.91);
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #888B93;
position:absolute;
bottom:-14px;
left:-8px;
}
}
>>> .el-image-viewer__canvas{
padding: 0px;
}