彩蛋:后台管理系统一站式平台模板
1、效果图
2 代码
<template>
<div class="upload">
<el-carousel :autoplay="false" type="card" height="260px" indicator-position="none" ref="carousel" @change="onCarouselChange" v-loading="uploadLoading" element-loading-text="上传中...">
<el-carousel-item v-for="(item, index) in uploadList" :key="index">
<img :src="item" alt style="width: 100%;height: 260px;" />
</el-carousel-item>
<div class="no-img" v-if="uploadList.length <= 0">暂无图片,请选择图片进行上传!</div>
</el-carousel>
<div class="upload-warp">
<div class="upload-warp-left" @click="handlePrev">
<i class="el-icon-arrow-left"></i>
</div>
<div class="upload-warp-center">
<div v-for="(item, index) in uploadList" :key="item" class="upload-warp-center-img">
<img :src="item" alt :class="imgActiveIndex == index ? 'img-br' : ''" @click="handleImgClick(index)" />
<i class="el-icon-close" @click="handleDelImg(index)"></i>
</div>
<el-upload :action="uploadUrl" :show-file-list="false" list-type="picture-card" :on-progress="handleAvatarProgress" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" accept=".jpg, .jpeg, .png, .gif, .pdf, .doc, .docx, .xls, .xlsx, .JPG, .JPEG, .PBG, .GIF, .PDF, .DOC, .DOCX, .XLS, .XLSX" v-if="uploadList.length < 5">
<i class="el-icon-plus"></i>
</el-upload>
</div>
<div class="upload-warp-left" @click="handleNext">
<i class="el-icon-arrow-right"></i>
</div>
</div>
</div>
</template>
<script>
export default {
name: "carouselUpload",
data() {
return {
uploadList: [],
imgActiveIndex: 0,
uploadLoading: false,
uploadUrl: "https://jsonplaceholder.typicode.com/posts/"
};
},
methods: {
// carousel 改变时
onCarouselChange(index) {
this.imgActiveIndex = index;
},
// 文件上传时的钩子
handleAvatarProgress() {
this.uploadLoading = true;
},
// 文件上传成功时的钩子
handleAvatarSuccess(res, file) {
this.uploadList.push(URL.createObjectURL(file.raw));
this.uploadLoading = false;
this.$message.success("图片上传成功");
},
// 文件上传失败时的钩子
handleAvatarError() {
this.$message.warning("图片上传失败");
this.uploadLoading = false;
},
// 底部图片导航列表
handleImgClick(index) {
this.imgActiveIndex = index;
this.$refs.carousel.setActiveItem(index);
},
// 底部图片导航列表当前项删除
handleDelImg(index) {
this.uploadList.splice(index, 1);
},
// 底部图片导航列表上一张
handlePrev() {
if (!this.uploadList.length) return;
if (this.imgActiveIndex === 0) {
this.imgActiveIndex = this.uploadList.length;
}
this.imgActiveIndex--;
this.$refs.carousel.setActiveItem(this.imgActiveIndex);
},
// 底部图片导航列表下一张
handleNext() {
if (!this.uploadList.length) return;
if (this.imgActiveIndex >= this.uploadList.length - 1) {
this.imgActiveIndex = 0;
} else {
this.imgActiveIndex++;
}
this.$refs.carousel.setActiveItem(this.imgActiveIndex);
}
}
};
</script>
<style lang="scss" scoped>
.upload {
.upload-warp {
display: flex;
height: 60px;
margin-top: 20px;
&-left {
flex-basis: 36px;
line-height: 60px;
text-align: center;
font-size: 28px;
color: #cccccc;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
color: gray;
transition: all 0.3s ease;
}
}
&-center {
flex-basis: calc(100% - 72px);
display: flex;
&-img {
width: 20%;
position: relative;
border-radius: 2px;
margin: 0 4px 0;
img {
width: 100%;
height: 60px;
box-sizing: border-box;
border-radius: 2px;
border: 1px solid transparent;
}
.img-br {
border: 1px solid #09f;
}
i {
position: absolute;
right: -5px;
top: -10px;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #09f;
color: white;
border-radius: 100%;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0;
}
&:hover i {
opacity: 1;
transition: all 0.3s ease;
}
}
}
}
}
</style>
<style scoped>
.upload-warp-center >>> .el-upload--picture-card {
width: 60px;
height: 60px;
line-height: 60px;
}
.upload >>> .no-img {
height: 260px;
line-height: 260px;
color: #c0c4cc;
background: #f5f7fa;
text-align: center;
}
</style>