当前位置: 首页 > news >正文

vue element 多图片组合预览

 

定义组件:preview-image

<template><div><div class="imgbox"><divclass="preview-img":class="boxClass"v-if="Imageslist == 3 ||Imageslist == 5 ||Imageslist == 7 ||Imageslist == 8 ||Imageslist >= 9"><divclass="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-imageref="preview"fit="cover":preview-src-list="previewImages":src="_item"/><divclass="box-image-shade"@click="imglistclick()"v-if="item.length > 4 && _index == 3"><div class="shade-more"><i class="el-icon-d-arrow-right"></i><iclass="arrow"custom-style="margin-left:-16px;"></i></div><div>{{ Imageslist }}张</div></div></div></div></div></div><div :class="boxClass" class="preview-img" v-else><divv-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",];

 

 

http://www.lryc.cn/news/129079.html

相关文章:

  • Vue2集成Echarts实现可视化图表
  • 3 Python的数据类型
  • new String()到底创建了几个对象
  • 第五十五天
  • 【推荐】深入浅出benan的生命周期
  • mysql使用redis+canal实现缓存一致性
  • 9.利用matlab完成 泰勒级数展开 和 符号表达式傅里叶变换和反变换 (matlab程序)
  • 文字点选验证码识别(上)-YOLO位置识别
  • ssh远程连接慢解决方法
  • 10.4K Star!程序员为程序员针对性优化的开源免费笔记
  • ppt中线材相交接的地方,如何绘画
  • [VS/C++]如何更好的配置DLL项目中的成品输出
  • REC 系列 Visual Grounding with Transformers 论文阅读笔记
  • Linux常用命令总结
  • Scratch 之 制作超丝滑 FNF 推条
  • java通过反射,动态调用指定注解的方法
  • QT学习方法
  • C++中的类型擦除技术
  • 激光雷达 01 线数
  • PHP 公交公司充电桩管理系统mysql数据库web结构apache计算机软件工程网页wamp
  • HTML <strong> 标签
  • 机器学习笔记 - 使用 ResNet-50 和余弦相似度的基于图像的推荐系统
  • Codeforces Round 881 Div.3
  • Kubernetes(K8s)从入门到精通系列之十六:linux服务器安装minikube的详细步骤
  • JDBC配置文件抽取-spring11
  • el-form组件相关的一些基础使用
  • 全新 – Amazon EC2 M1 Mac 实例
  • java # Servlet
  • Linux内核的两种安全策略:基于inode的安全与基于文件路径的安全
  • 有哪些前端开发工具推荐? - 易智编译EaseEditing