vue element 多图片组合预览的实现
作者：花归去
本文主要介绍了vue element多图片预览实现的相关资料,最近的项目中有图片预览的场景,本文就来介绍一下如何使用,感兴趣的可以了解一下
本文主要介绍了vue element 多图片组合预览，分享给大家，具体如下
定义组件：preview-image
<template>
<div>
<div class="imgbox">
<div
class="preview-img"
:class="boxClass"
v-if="
Imageslist == 3 ||
Imageslist == 5 ||
Imageslist == 7 ||
Imageslist == 8 ||
Imageslist >= 9
"
>
<div
class="img-box"
v-for="(item, index) in imgArr"
:key="index"
>
<div v-for="(_item, _index) in item" :key="_index">
<div class="box-image" v-if="_index <= 3">
<el-image
ref="preview"
fit="cover"
:preview-src-list="previewImages"
:src="_item"
/>
<div
class="box-image-shade"
@click="imglistclick()"
v-if="item.length > 4 && _index == 3"
>
<div class="shade-more">
<i class="el-icon-d-arrow-right"></i>
<i
class="arrow"
custom-style="margin-left:-16px;"
></i>
</div>
<div>{{ Imageslist }}张</div>
</div>
</div>
</div>
</div>
</div>
<div :class="boxClass" class="preview-img" v-else>
<div
v-if="
Imageslist != 3 ||
Imageslist != 5 ||
Imageslist != 7 ||
Imageslist != 8 ||
Imageslist <= 9
"
class="box-image"
v-for="(item, index) in imgArr"
:key="index"
>
<el-image fit="contain" :src="item" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
previewData: {
type: Array,
default: () => {
return [];
},
// observer: function (newVal, oldVal) {
// console.log("newVal, oldVal", newVal, oldVal);
// const previewImages = [];
// newVal.map((item) => {
// previewImages.push(item);
// });
// this.setData({
// previewImages,
// });
// this.formatImageList(newVal);
// },
},
},
watch: {
previewData: function (newVal, oldVal) {
console.log("newVal, oldVal", newVal, oldVal);
const previewImages = [];
newVal.map((item) => {
previewImages.push(item);
});
this.previewImages = previewImages;
this.formatImageList(previewImages);
console.log("222222", newVal.length);
this.$nextTick(() => {
this.Imageslist = newVal.length;
});
// this.formatImageList(newVal);
},
},
data() {
return {
previewImages: [],
imgArr: [],
boxClass: "one",
Imageslist: 0,
};
},
mounted() {},
methods: {
imglistclick() {
console.log("图片", this.$refs.preview[8]);
this.$refs.preview[8].clickHandler();
},
formatImageList(imageArr) {
// console.log("imageArr---", imageArr);
console.log("长度：", imageArr.length);
const arrLength = imageArr.length;
if (arrLength == 1) {
// this.setData({
// imgArr: imageArr,
// boxClass: "one",
// });
this.imgArr = imageArr;
this.boxClass = "one";
}
if (arrLength == 2) {
// this.setData({
// imgArr: imageArr,
// boxClass: "two",
// });
this.imgArr = imageArr;
this.boxClass = "two";
}
if (arrLength == 3) {
const firstArr = [...imageArr.splice(0, 1)];
const threeArr = [[...firstArr], [...imageArr]];
// this.setData({
// imgArr: threeArr,
// boxClass: "three",
// });
this.imgArr = threeArr;
this.boxClass = "three";
}
if (arrLength == 4) {
// this.setData({
// imgArr: imageArr,
// boxClass: "four",
// });
this.imgArr = imageArr;
this.boxClass = "four";
}
if (arrLength == 5) {
const firstArr = [...imageArr.splice(0, 1)];
const fiveArr = [[...firstArr], [...imageArr]];
// this.setData({
// imgArr: fiveArr,
// boxClass: "five",
// });
this.imgArr = fiveArr;
this.boxClass = "five";
}
if (arrLength == 6) {
// this.setData({
// imgArr: imageArr,
// boxClass: "six",
// });
this.imgArr = imageArr;
this.boxClass = "six";
}
if (arrLength == 7) {
const firstArr = [...imageArr.splice(0, 1)];
const secondArr = [...imageArr.splice(0, 4)];
const sevenArr = [[...firstArr], [...secondArr], [...imageArr]];
console.log("sevenArr", sevenArr);
// this.setData({
// imgArr: sevenArr,
// boxClass: "seven",
// });
this.imgArr = sevenArr;
this.boxClass = "seven";
}
if (arrLength == 8) {
const firstArr = [...imageArr.splice(0, 1)];
const secondArr = [...imageArr.splice(0, 4)];
const eightArr = [[...firstArr], [...secondArr], [...imageArr]];
console.log("eightArr", eightArr);
// this.setData({
// imgArr: eightArr,
// boxClass: "eight",
// });
this.imgArr = eightArr;
this.boxClass = "eight";
}
if (arrLength >= 9) {
const firstArr = [...imageArr.splice(0, 1)];
const secondArr = [...imageArr.splice(0, 4)];
const nineArr = [[...firstArr], [...secondArr], [...imageArr]];
console.log("nineArr", nineArr);
// this.setData({
// imgArr: nineArr,
// boxClass: "nine",
// });
this.imgArr = nineArr;
this.boxClass = "nine";
}
},
},
};
</script>
<style lang="scss" scoped>
.spanimg {
}
.imgbox {
width: 675px;
padding-bottom: 50px;
// background: red;
}
.preview-img {
padding: 16px 5px 0;
box-sizing: border-box;
}
.box-image {
margin-top: 10px;
width: 315px;
height: 315px;
border-radius: 6px;
overflow: hidden;
}
.box-image .el-image {
width: 100%;
height: 100%;
// width: 100px;
// height: 100px;
display: block;
}
.two {
display: flex;
align-items: center;
justify-content: flex-start;
}
.two .box-image + .box-image {
margin-left: 12px;
}
.three,
.five,
.seven,
.eight,
.nine {
display: flex;
align-items: center;
justify-content: flex-start;
}
.three .img-box + .img-box {
margin-left: 12px;
}
.three .img-box + .img-box .box-image {
width: 154px;
height: 153px;
}
.four {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.four .box-image {
width: 205px;
height: 205px;
margin-right: 14px;
margin-top: 14px;
}
.five .img-box + .img-box {
margin-left: 12px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.five .img-box + .img-box .box-image {
width: 153px;
height: 153px;
}
.six {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.six .box-image {
width: 205px;
height: 205px;
margin-top: 14px;
}
.seven,
.eight,
.nine {
flex-wrap: wrap;
}
.seven .img-box:nth-child(2),
.eight .img-box:nth-child(2),
.nine .img-box:nth-child(2) {
margin-left: 12px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 315px;
}
.seven .img-box:nth-child(2) .box-image,
.eight .img-box:nth-child(2) .box-image,
.nine .img-box:nth-child(2) .box-image {
width: 153px;
height: 153px;
}
.seven .img-box:nth-child(3) {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.seven .img-box:nth-child(3) .box-image + .box-image {
margin-left: 12px;
margin-top: 14px;
width: 315px;
}
.eight .img-box:nth-child(3),
.nine .img-box:nth-child(3) {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.eight .img-box:nth-child(3) .box-image {
width: 206px;
height: 206px;
margin-top: 14px;
}
.nine .img-box:nth-child(3) .box-image {
width: 152px;
height: 152px;
margin-top: 12px;
position: relative;
}
.box-image-shade {
width: 152px;
height: 152px;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.55);
text-align: center;
font-size: 28px;
font-weight: 500;
color: #ffffff;
line-height: 42px;
padding-top: 36px;
box-sizing: border-box;
}
</style>父组件中引用子组件preview-image
import previewimage from "../../components/commonModule/preview-image.vue";
<previewimage :previewData="limagePreviewArn"></previewimage>
data中定义变量：limagePreviewArn
this.limagePreviewArn = [
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
"https://img01.yzcdn.cn/vant/apple-1.jpg",
"https://img01.yzcdn.cn/vant/apple-2.jpg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
"https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
"https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
"https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
"https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
"https://img01.yzcdn.cn/vant/cat.jpeg",
];到此这篇关于vue element 多图片组合预览的实现的文章就介绍到这了,更多相关vue element 多图片组合预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！