vue element 多圖片組合預(yù)覽的實(shí)現(xiàn)
更新時(shí)間：2023年08月15日 09:19:12 作者：花歸去
本文主要介紹了vue element多圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項(xiàng)目中有圖片預(yù)覽的場(chǎng)景,本文就來(lái)介紹一下如何使用,感興趣的可以了解一下
本文主要介紹了vue element 多圖片組合預(yù)覽，分享給大家，具體如下
定義組件：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("長(zhǎng)度：", 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",
];到此這篇關(guān)于vue element 多圖片組合預(yù)覽的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue element 多圖片組合預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
ant design vue中table表格滾動(dòng)加載實(shí)現(xiàn)思路
在處理一寫數(shù)據(jù)量特別大的情況下,我們不能把后端的數(shù)據(jù)一次性全部拿到前端在table表格中展示,為了考慮性能優(yōu)化,使用了滾動(dòng)加載表格數(shù)據(jù),這篇文章主要介紹了ant design vue中table表格滾動(dòng)加載實(shí)現(xiàn)思路,需要的朋友可以參考下2024-07-07
在vue項(xiàng)目中引入scss并使用scss樣式詳解
SCSS是一種CSS預(yù)處理語(yǔ)言,定義了一種新的專門的編程語(yǔ)言,編譯后形成正常的css文件,為css增加一些編程特性,這篇文章主要給大家介紹了關(guān)于在vue項(xiàng)目中引入scss并使用scss樣式的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue項(xiàng)目Luckysheet的使用,目前Luckysheet不支持使用npm安裝包，所以只能使用CDN引入依賴，在vue項(xiàng)目的public/index.html文件里引入即可，本文通過(guò)示例代碼給大家詳細(xì)介紹，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分割驗(yàn)證碼效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
詳解使用webpack打包編寫一個(gè)vue-toast插件
本篇文章主要介紹了詳解使用webpack打包編寫一個(gè)vue插件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
VUE子組件向父組件傳值詳解（含傳多值及添加額外參數(shù)場(chǎng)景）
這篇文章主要給大家介紹了關(guān)于VUE子組件向父組件傳值（含傳多值及添加額外參數(shù)場(chǎng)景）的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
v-model是Vue中的一個(gè)重要語(yǔ)法糖,主要用于實(shí)現(xiàn)數(shù)據(jù)的雙向綁定,它通過(guò)結(jié)合value屬性和input事件,簡(jiǎn)化了代碼并提高了開(kāi)發(fā)效率,文中通過(guò)代碼介紹的非常詳解,需要的朋友可以參考下2024-09-09
本文主要是帶領(lǐng)大家分析$mount的相關(guān)知識(shí)，需要的朋友一起學(xué)習(xí)吧2017-12-12
詳解webpack + vue + node 打造單頁(yè)面(入門篇)
本篇文章主要介紹了詳解webpack + vue + node 打造單頁(yè)面(入門篇) ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
moment是一款多語(yǔ)言支持的日期處理類庫(kù), 在vue中如何使用呢?這篇文章主要給大家介紹了關(guān)于vue之moment使用的相關(guān)資料,需要的朋友可以參考下2021-05-05