Vue中使用v-Viewer缩略图放大显示原图

1.首先安装插件

npm install v-viewer --save

2.在main.js中配置

//引入图片查看器
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
import { isNotBlank, isBlank } from "./plugins/util";
Vue.prototype.$isBlank = isBlank;
Vue.prototype.$isNotBlank= isNotBlank;
Viewer.setDefaults({
  // inline: true,
  // button: true,
  // navbar: true,
  // title: true,
  // toolbar: true,
  // tooltip: true,
  // movable: true,
  // zoomable: true,
  // scalable: true,
  // transition: true,
  // fullscreen: true,
  // keyboard: true,
  // rotatable: true,
  // data-source 大图路径的配置属性，可自定义。
  url: "data-source",
  //filter对选择的图片进项筛选处理，window.vm.$isBlank(dataSource)自己封装的方法，表示返回的是空。
  filter(image) {
    let dataSource = image.getAttribute('data-source')
    // $isBlank  判断是否为空
    // 判断是否为空 返回true/false   需要在公用文件/plugins/util封装以下代码并在main.js中引入才可使用
   //export const isBlank = (data) => {
   //     if (data == null || data === 'null' || data === '' || data === undefined || data ===   'undefined' || data === 'unknown') {
   //         return true
   //     } else {
   //         return false
   //     }
   // }
    if (window.vm.$isBlank(dataSource)) {
      return false;
    } else {
      return true;
    }
  }
});
Vue.use(Viewer);

3.在vue文件中使用时

<template>
//  images clearfix 这俩个class必须添加    在组件最外层添加v-viewer即可
  <div class="PreviewCard images clearfix" v-viewer>
    <div class="lookPreviewCard" v-for="item in lookData" :key="item.fileId">
    //  $getImgRequestPath 此处返回的是一个路径，自己封装的一个简易获取方式
    //  在需要图片放大的地方加入:data-source  即可。

		// 根据:src="$getImgRequestPath(item.fileId, 'main')" 传入的值判断是缩略图还是原图。
        // Vue.prototype.$getImgRequestPath = (fileId, fileType) => {
        //     if(window.vm.$isBlank(fileId)){
        //         return '';
        //     }
        //     if(window.vm.$isBlank(fileType)){
        //         fileType = 'salve'
        //     }
        //     return `http://******.com/.../.../.../.../${fileId}/${fileType}`
        // };
      <img :src="$getImgRequestPath(item.fileId, 'main')" :data-source="$getImgRequestPath(item.fileId, 'main')" alt="" />
      <p>{{item.fileName}}</p>
    </div>
    <!-- 页尾 -->
    <div class="buttom-content">
      <div class="footer-content">
        <div class="leftBack">
          <span @click="goBack">返回上页</span>
        </div>
      </div>
    </div>
  </div>
</template>

觉得本文对你有帮助？请分享给更多人
点赞和在看就是最大的支持❤️