vue element 多图片组合预览的实现
更新时间：2023年08月15日 09:19:12 作者：花归去
本文主要介绍了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 多图片组合预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue是组件化开发框架,所以对于vue应用来说组件间的数据通信非常重要,下面这篇文章主要给大家介绍了关于高频率Vue面试题以及答案的相关资料,需要的朋友可以参考下2023-02-02
本篇文章主要介绍了vue2.0中click点击当前li实现动态切换class ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
动态路由,动态即不是写死的,是可变的,下面这篇文章主要给大家介绍了关于vue实现动态路由的详细代码示例,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要和大家一起深入探讨Vue.js组件和组件通信的相关资料，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了vue element如何添加遮罩层问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
今天在修改 el-table 源码过程中遇到一个头大的问题,原本修改编译后,将 element的子目录lib下的文件复制到项目的响应目录里就可以了,但是这次总出问题,下面小编给大家分享element ui 添加自定义方法,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了Vue详细的入门笔记，对Vue感兴趣的同学，可以参考下2021-05-05
Vue Router 是 Vue.js 的官方路由库,用于在 Vue 应用中实现单页面应用（SPA）的客户端路由,以下是 Vue Router 的详细介绍,包括基本概念、配置、路由导航以及高级用法,感兴趣的小伙伴跟着小编一起来看看吧2024-08-08
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了Vue封装Axios请求和拦截器的步骤，帮助大家更好的对axios进行封装并将接口统一管理，同时为请求和响应设置拦截器interceptors。，感兴趣的朋友可以了解下2020-09-09
最新评论