vue图片缩略图及预览功能(VuePreview)

1、安装控件:

cnpm i vue-preview

2、引入控件

找到main.js 文件，添加 :

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

别忘了编译: npm run serve

3、在图片页面引入样式

import VuePreview from 'vue-preview';
import Vue from 'vue'
Vue.use(VuePreview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {top: 0, bottom: 0},
  captionEl: false,
  fullscreenEl: false,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: true,
  tapToToggleControls: false
})

4、页面代码

<template>
  <div>
    <checkLogin ></checkLogin>
    <!--头部 begin-->
    <cheader :title="'查看收据'"></cheader>
    <vue-preview :slides="details" @close="handleClose"  class="preview"></vue-preview>
  </div>
</template>
<script>
import VuePreview from 'vue-preview';
import Vue from 'vue'
Vue.use(VuePreview, {
  mainClass: 'pswp--minimal--dark',
  barsSize: {top: 0, bottom: 0},
  captionEl: false,
  fullscreenEl: false,
  shareEl: false,
  bgOpacity: 0.85,
  tapToClose: true,
  tapToToggleControls: false
})
export default {
  name: 'shouju',
  data () {
    return {
      details:[{w}]
    }
  },
  created() {
     this.getPicByOrderNo()
  },
  methods:{
    getPicByOrderNo(){ 
        api.getPicByOrderNo({orderNO : this.orderNO}).then(res => {
          if(res.success){
            var data = res.data.data
            if (data!=null) {
              data.forEach(item => {
                item.w = 1000;   //设置以大图浏览时的宽度
                item.h = 900;     //设置以大图浏览时的高度
                item.src = item.src;  //大图
                item.msrc = item.msrc;  //小图
                item.title = item.title  //标题
              });
              this.details =data
            } else {
              Toast('获取图片信息失败！');
            }
          }
        })
    }
  }
}
</Script>
<style>
  .preview figure {
    float: left;
    width: 30%;
    height:auto;
    margin: 1.5%;
  }

  .preview figure img {
    width: 100%;
    height: 75%;
  }
</style>

上面 preview figure img 、preview figure class可以根据实际情况调整图片展示样式

说明: vue-preview规定，用来绑定的数据源必须是一个数组，数组里的每一项都要是个js对象，数据格式:

[{w: 600, h: 500, src: xxxx, msrc: xxxxxx},{w: 600, h: 500, src: xxxx, msrc: xxxxxx}]
接口定义的图片实体可以定义为:

public class PayPictureDTO implements Serializable{

    @ApiModelProperty("宽度")
    private int w;

    @ApiModelProperty("高度")
    private int h;

    @ApiModelProperty("标题")
    private String title;

    @ApiModelProperty("小图")
    private String msrc;

    @ApiModelProperty("大图")
    private String src;

}

查询后用 List<PayPictureDTO> 格式返回即可
最后看一下效果:

image.png
image.png