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、页面代码

上面 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 格式返回即可
最后看一下效果:

image.png

image.png