vue-preview 用法

安装

npm i vue-preview -S

在main.js文件中导入该组件，并挂载到Vue身上

import VuePreview from "vue-preview"
Vue.use(VuePreview)

在组件中使用

<template>   
    <div class="thumbs">
      <vue-preview :slides="imgs" class="imgPrev"></vue-preview>
    </div>
</template>
<script>
import Vue from "vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      imgs: [],
      rootPath: Vue.http.options.root
    };
  },
  created() {
    this.getImg();
  },
  methods: {
    getImg() {
      this.$http.get("api/getthumimages/" + this.id).then(respons => {
        console.log(respons.body.message);
        if (respons.body.status == 0) {
          //遍历里面的图片
          respons.body.message.forEach(item => {
            item.w = 600; //设置以大图浏览时的宽度
            item.h = 400; //设置以大图浏览时的高度
            item.src = this.rootPath + item.src; //大图
            item.msrc = item.src; //小图
          });
          this.imgs = respons.body.message;
        } else {
          Toast("获取图片信息失败！");
        }
      });
    }
  }
};
</script>

<style lang="scss">
.imginfo-box {
  .thumbs {
    overflow: hidden;
    .imgPrev {
      figure {
        display: inline-block;
        margin: 0;
      }
    }

    img {
      margin: 10px;
      box-shadow: 0 0 8px #999;
      width: 92px;
      height: 61px;
    }
  }

}
</style>

小图显示

大图显示