- 一、实质:Element-UI对话框与轮播图综合使用,PictureComponent.vue 是封装好的图库组件,
在PictureList.vue文件中通过 <PictureComponent 。。。 />引用,实现图库效果。
- 二、源码:
1.PictureList.vue (调用图库组件demo)
<template>
<div>
<div class="head">
<el-button style="padding-right: 4px" type="text" v-on:click="goBack">
<i class="el-icon-back" style="color:#fff;"></i>
</el-button>
<label>图库</label>
</div>
<div class="content">
<PictureComponent
e
v-for="(item, index) in testData"
:data="item.imagesList"
:max-show="20"
:key="index"
:time="item.timeDescribe"
style="margin-bottom:25px;"
/>
</div>
</div>
</template>
<script>
import PictureComponent from "../components/PictureComponent";
export default {
data() {
return {
testData: [
{
timeDescribe: "今天",
imagesList: [
{
id: 0,
url:
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
time: "2019-11-12 06:00:00"
},
{
id: 1,
url:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
time: "2019-11-12 06:00:00"
},
{
id: 2,
url:
"https://bpic.588ku.com/element_origin_min_pic/19/04/09/a277bb5712ad1039f972929340cb86b3.jpg",
time: "2019-11-12 06:00:00"
}
]
},
{
timeDescribe: "昨天",
imagesList: [
{
id: 0,
url:
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
time: "2019-11-11 06:00:00"
},
{
id: 1,
url:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
time: "2019-11-11 06:00:00"
},
{
id: 2,
url:
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
time: "2019-11-11 06:00:00"
},
{
id: 3,
url:
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
time: "2019-11-11 06:00:00"
},
{
id: 4,
url:
"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
time: "2019-11-11 06:00:00"
}
]
},
{
timeDescribe: "2019-11-11",
imagesList: [
{
id: 0,
url:
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
time: "2019-11-10 06:00:00"
},
{
id: 1,
url:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
time: "2019-11-10 06:00:00"
}
]
}
]
};
},
components: { PictureComponent },
methods: {
goBack() {
this.$router.go(-1);
}
}
};
</script>
<style scoped lang="scss">
.head {
background: #3f51b5;
color: #fff;
padding: 10px;
i {
padding-right: 0px;
padding-left: 10px;
}
}
.content {
height: calc(100vh - 60px);
overflow-y: auto;
overflow-x: hidden;
background: #f7f7f7;
}
</style>
2.PictureComponent.vue ( 图库组件:在一个图片列表中点击一个图片可以查看大图且左右切换上一张/下一张)
<template>
<div>
<label class="timeline">{{ time }}</label>
<div id="star-pic-vue">
<template v-if="data">
<img
e
v-for="(item, index) in images"
:src="item.url"
:key="index"
id="contract_url"
@click="enlargePic(index)"
/>
<template v-if="isDialogShow"> </template>
<el-dialog
:visible.sync="centerDialogVisible"
width="100%"
modal
close-on-click-modal
custom-class="dialog"
>
<el-carousel
:autoplay="false"
arrow="always"
:initial-index="activeIndex"
:loop="false"
ref="carousel"
indicator-position="outside"
>
<el-carousel-item v-for="(item, index) in images" :key="index">
<img :src="item.url" />
</el-carousel-item>
</el-carousel>
</el-dialog>
</template>
</div>
</div>
</template>
<script>
export default {
name: "PictureComponent",
props: ["data", "maxShow", "time"],
data() {
return {
centerDialogVisible: false,
showPic: "",
isDialogShow: false,
activeIndex: 1
};
},
computed: {
images() {
if (this.data instanceof Array && this.data.length > 2) {
var value = this.data;
return value.splice(0, this.maxShow);
} else {
return this.data;
}
}
},
methods: {
// 放大图片
enlargePic(i) {
this.activeIndex = i;
this.isDialogShow = true;
if (this.$refs.carousel) {
// 手动切换幻灯片,需要切换的幻灯片的索引,从 0 开始;
this.$refs.carousel.setActiveItem(i);
}
this.centerDialogVisible = true;
}
}
};
</script>
<style lang="scss">
.timeline {
display: block;
margin: 10px 20px 5px;
}
#star-pic-vue .el-dialog__wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0;
background: #171717;
}
#star-pic-vue {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: stretch;
padding: 3px 13px;
img {
width: 82px;
height: 80px;
margin: 4px 0px 0px;
padding-right: 2px;
}
.dialog {
img {
width: 100%;
height: 100%;
margin: 0;
}
}
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
height: 100%;
width: 100%;
}
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 0 !important;
margin: 0 !important;
height: 460px;
background: #171717;
}
.el-carousel {
height: 100%;
}
.el-carousel__container {
height: 410px;
}
.el-carousel__indicators--outside {
margin-top: 20px;
}
}
</style>
- 三、效果:(图片练习用的)