v-viewer使用略缩图

Vue.use(Viewer);
Viewer.setDefaults({
  url: "data-source", // 大图地址参数
  Options: {
    inline: true, // 是否启用inline模式
    button: true, // 是否显示右上角关闭按钮
    navbar: true, // 是否显示缩略图底部导航栏
    title: false, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
    toolbar: true, // 是否显示工具栏
    url: "data-source", // 设置大图片的 url
  },
  filter(image) {
    // 只有大图的才能放大
    let dataSource = image.getAttribute("data-source");
    if (dataSource == null || dataSource == undefined) {
      return false;
    } else {
      return true;
    }
  },
});
<viewer
    @inited="inited"
    v-if="record.picList && record.picList.length > 1"
    :images="record.picList.slice(1, record.picList.length - 1)"
    :options="viewerOptions"

>
    <img
    class="cmchPic"
    v-for="(pic, index) of record.picList.slice(
        1,
        record.picList.length - 1
    )"
    :key="index"
    v-lazy="pic"
    :data-source="pic.replace('/imgs/img/', '/imgs/')"
    alt=""
    width="160"
    style="cursor:pointer"
    />
</viewer>

参考