vue 图片查看

npm安装

npm install v-viewer

main.js中配置

注：大图参数，只需要在标签中有data-source这个属性即可，属性里放大图的地址，然后这个属性你可以自定义

import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Viewer.setDefaults({
  // 需要配置的属性 注意属性并没有引号
  url: 'data-source', // 大图地址参数
  title: false,
  toolbar: false,
  zIndex:99999,
  filter (image) {
    // 不用筛选，只要有图都可以放大
    return true
    // 只有大图的才能放大
    // const dataSource = image.getAttribute('data-source')
    // if (dataSource === null || dataSource === undefined) {
    //   return true
    // } else {
    //   return true
    // }
  }
})
Vue.use(Viewer)

使用

给标签加上v-viewer指令，和属性就可以了

<view v-viewer>
     <img :src="小图地址" alt="" :data-source="大图地址" />
</view>