10.viewer.js图像查看

1.地址

• JS 版本：https://github.com/fengyuanchen/viewerjs
• jQuery 版本：https://github.com/fengyuanchen/viewer
• viewerjs-master.zip
• 预览地址

  2.使用

vue中使用

• 安装

  npm install v-viewer --save

• 引入 ```javascript //main.js 中全局引入 import Vue from ‘vue’; import Viewer from ‘v-viewer’ import ‘viewerjs/dist/viewer.css’ Vue.use(Viewer) Viewer.setDefaults({ Options: { ‘inline’: true, ‘button’: true, ‘navbar’: true, ‘title’: true, ‘toolbar’: true, ‘tooltip’: true, ‘movable’: true, ‘zoomable’: true, ‘rotatable’: true, ‘scalable’: true, ‘transition’: true, ‘fullscreen’: true, ‘keyboard’: true, ‘url’: ‘data-source’ } })

// 局部引入 import ‘viewerjs/dist/viewer.css’; import Viewer from ‘viewerjs’;

- 使用
```html
<el-row :gutter="5">
  <el-col :span="4">现场图片:</el-col>
  <el-col :span="20">
    <img class="scenePic" :id="'scenePic' + index" v-for="(item, index) in prompt.ScenePic" :key="index" :src="'http://114.116.237.5:8018' + item" @click="imgZoom('scenePic' + index)" />
  </el-col>
</el-row>

export default {
  name: 'jsjc',
  data() {
    return {
        prompt:{
              ScenePic:["/web/upload/20200423150810_9967.jpg"]
      }
    }
  },
  methods:{
       imgZoom(url) {
      var viewer = new Viewer(document.getElementById(url), {
        button: true,
      });
    },
  }
}

• 效果

配置: