【vue-preview 图片预览插件】

npm官网 vue-preview

1.安装

cnpm i vue-preview -S

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

import VuePreview from 'vue-preview';
Vue.use(VuePreview);

3.在组件中使用它

<template>
   <div class="imglist">
      <vue-preview :slides="list" @close="handleClose"></vue-preview>
    </div>
</template>
<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      list: [],
    };
  },
  created() {
    this.getImgs();
  },
  methods: {
    getImgs() {
      this.$http.get("api/getthumimages/" + this.id).then((result) => {
        if (result.body.status === 0) {
          result.body.message.forEach((item) => {
            item.w = 600;
            item.h = 600;
            item.msrc = item.src;
          });
          this.list = result.body.message;
        } else {
          alert("图片获取失败");
        }
      });
    },
    handleClose() {
      console.log("close event");
    },
  },
};
</script>
<style>
.imglist figure {
  float: left;
  width: 30%;
  height: calc(30vw - 0px);
  margin: 1.5%;
}
.imglist figure img {
  width: 100%;
}
</style>

注意：样式表不能加scoped，否则无法修改vue-preview的样式
vant里面也有图片预览组件——ImagePreview，如果项目中使用了vant，用ImagePreview会更方便一些哦~