vue element 多圖片組合預覽的實現(xiàn)
更新時間：2023年08月15日 09:19:12 作者：花歸去
本文主要介紹了vue element多圖片預覽實現(xiàn)的相關(guān)資料,最近的項目中有圖片預覽的場景,本文就來介紹一下如何使用,感興趣的可以了解一下
本文主要介紹了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",
];到此這篇關(guān)于vue element 多圖片組合預覽的實現(xiàn)的文章就介紹到這了,更多相關(guān)vue element 多圖片組合預覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
從0到1構(gòu)建vueSSR項目之node以及vue-cli3的配置
這篇文章主要介紹了從0到1構(gòu)建vueSSR項目之node以及vue-cli3的配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue-cli4.0如何配置CDN加速問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue2使用ts?vue-class-component的過程
vue-property-decorator?是一個?Vue.js?的裝飾器庫,它提供了一些裝飾器來讓你在?Vue?組件中定義屬性、計算屬性、方法、事件等,本文給大家介紹vue2使用ts?vue-class-component的相關(guān)知識,感興趣的朋友一起看看吧2023-11-11
Vue路由懶加載是一種優(yōu)化技術(shù),旨在減少應用程序的初始加載時間并提高性能,這篇文章給大家介紹vue路由懶加載的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-05-05
Vue使用Element實現(xiàn)增刪改查+打包的步驟
這篇文章主要介紹了Vue使用Element實現(xiàn)增刪改查+打包的步驟，幫助大家更好的理解和學習vue框架，感興趣的朋友可以了解下2020-11-11
elementui中使用el-tabs切換實時更新數(shù)據(jù)
這篇文章主要介紹了elementui中使用el-tabs切換實時更新數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-09-09
這篇文章主要介紹了vue自定義上傳頭像組件功能,介紹了與一般上傳組件的區(qū)別,通過實例代碼介紹了上傳圖片組件的方法,需要的朋友可以參考下2024-01-01
vue使用$emit時,父組件無法監(jiān)聽到子組件的事件實例
下面小編就為大家分享一篇vue使用$emit時,父組件無法監(jiān)聽到子組件的事件實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于vue.js Router中嵌套路由的相關(guān)資料,所謂嵌套路由就是路由里面嵌套他的子路由,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-06-06