vue中用Element实现类手机端图库效果

• 一、实质：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>

• 三、效果：(图片练习用的)

参考:https://www.jianshu.com/p/a4536a929795