Vue表格操作图片切换点击查看大图实现循环左右切换组件

【Vue表格操作图片切换点击查看大图实现循环左右切换】在Vue 表格操作中实现图片切换点击大图实现循环切换

文章图片

{ title: this.$t("detail"), width:200, render: (h, param) => { return h( "div", { style: { padding: "6px 0", display: "flex" } }, [ h(marQuee, { props: { pictureKey:param.row.pictures,//图片的地址多个为数组 width: 40,//在操作栏里的宽度 height: 40,//在操作栏里的高度 } }) ] ); } }

记得注册这个组件哈！
下面直接上组件非常清晰明了

> import util from "@/libs/util"; import imageView from "@/components/imageView"; export default { name: "Marquee", props: { pictureKey: Array,//图片的地址 width: Number, height: Number }, data() { return { showBigImg: false,//是否显示大图 num: 0,//记录是第几张大图 currentImage: "",//当前图片 offsetCount: 0,//记录是第几张表格小图 fisrtlist: true,//是否为第一张初始状态是真 lastlist: false//是否为最后一张初始状态是假 }; }, methods: { bigImg(currentImage, index) { this.currentImage = currentImage; this.showBigImg = true; this.num = index; if (index === 0) { this.fisrtlist = true; } else { this.fisrtlist = false; } if (index + 1 < this.pictureKey.length) { this.lastlist = false; } else { this.lastlist = true; } }, prev() { //上一张 if (this.num == 0) { this.lastlist = true; this.fisrtlist = false; this.num = this.pictureKey.length; } else { this.fisrtlist = false; this.lastlist = false; } this.num--; }, next() { //下一张 if (this.num == this.pictureKey.length - 1) { this.lastlist = false; this.fisrtlist = true; this.num = -1; } else { this.lastlist = false; this.fisrtlist = false; } this.num++; }, getUrl(pictkey) {//图片地址拼接 return `${process.env.VUE_APP_FILE_URL}/${pictkey}`; }, arrowL() { //列表的左箭头 if (this.offsetCount > 0) { this.lastlist = false; this.offsetCount--; this.$refs.imgList.style.left = "-" + 44 * this.offsetCount + "px"; } else { this.fisrtlist = true; return false; } }, arrowR() { //列表的右箭头 if (this.offsetCount < this.pictureKey.length - 3) { this.fisrtlist = false; this.offsetCount++; this.$refs.imgList.style.left = "-" + 44 * this.offsetCount + "px"; } else { this.lastlist = true; return false; } } } }; lang="less" scoped> .imgList { position: relative; } .imgList img { margin: 0 2px; user-select: none; } .imgList img:nth-child(odd) { border: 1px solid #bbbaba; } .imgList img:nth-child(even) { border: 1px solid black; } .imgMask { position: absolute; width: 100%; top: 0px; left: 0; z-index: 100; background: rgba(0, 0, 0, 0.6); user-select: none; } .showImg { width: 680px; position: relative; border: 5px solid #fff; border-radius: 3px; margin: 27px auto; background: #fff; } .bigImg { width: 100%; height: 100%; } .prev { position: absolute; top: 46%; font-size: 57px; color: #c8c9ca; z-index: 2; width: 62px; } .prev:hover { color: #e0e0e0; border-radius: 50%; } .next { position: absolute; top: 46%; right: -2px; font-size: 57px; color: #c8c9ca; z-index: 2; width: 62px; } .next:hover { color: #e0e0e0; border-radius: 50%; } .arrowLeft { font-size: 20px; color: black; z-index: 1; line-height: 42px; } .arrowRight { font-size: 20px; color: black; font-size: 20px; color: black; z-index: 1; position: absolute; right: 0; z-index: 1; line-height: 42px; } .wrapImage { width: 146px; overflow: hidden; white-space: nowrap; } .wrap { display: flex; height: 40px; } .close { font-size: 50px; color: #e9e9e9; float: right; } .close:hover { background: #b11f1f87; } .leftTooltip { position: absolute; bottom: 10px; left: 10px; padding: 5px 10px; color: #e9e9e9; font-size: 14px; font-weight: bold; } .rightTooltip { position: absolute; bottom: 1px; right: 10px; padding: 5px 10px; color: #e9e9e9; font-size: 14px; font-weight: bold; }