利用v-viewer图片预览插件放大需要预览的图片-牛翰网

一、页面效果

更多内容和效果在官网地址查看，官网地址：v-viewer

二、使用步骤

1.npm安装

npm install v-viewer@1.6.4

2.main.js文件中全局引入v-viewer插件

代码如下：

import Viewer from 'v-viewer'
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' }
})

3.完整代码

我这里写了常用的三种使用方式，页面效果我只是简单的布局，不要在意这个小细节，下面是代码：

<template>
  <div>
<!--    第一种方式-->
    <div style="width: 100%;height: 300px;margin-top:100px;display:flex;justify-content: center">
      <viewer :images="photo">
        <img
            v-for="(src, index) in photo"
            :src="src"
            :key="index"
            style="width: 200px;height: 300px;margin-left: 10px"
        />
      </viewer>
    </div>
<!--    第二种方式-->
    <img
        src="https://inews.gtimg.com/om_bt/OtJhl6_zArzI6BSdVjGLfKGObnrm36gW47dFuaxSOmT7YAA/1000"
        style="width: 300px;height: 200px;margin: 100px auto;display: block"
        v-viewer 
    />
<!--    第三种方式-->
    <button style="margin: 100px auto;display: block" type="button" class="button" @click="previewURL">点击展示图片</button>
  </div>
</template>

<script>
export default {
  name: "test",
  data(){
    return{
      photo:[
          'https://wxls-cms.oss-cn-hangzhou.aliyuncs.com/online/2024-04-18/218da022-f4bf-456a-99af-5cb8e157f7b8.jpg',
          'https://inews.gtimg.com/om_bt/O6SG7dHjdG0kWNyWz6WPo2_3v6A6eAC9ThTazwlKPO1qMAA/641'
      ]
    }
  },
  methods:{
    previewURL(){
      const $viewer = this.$viewerApi({
        images: this.photo
      })
    },
  }
}
</script>

<style scoped>

</style>

附：新手使用注意事项及解决方案

1. 安装和引入问题

问题描述：新手在安装 v-viewer 时，可能会遇到依赖包未正确安装或引入失败的问题。

解决步骤：

安装依赖：确保通过 npm 或 yarn 正确安装 v-viewer 和 viewer.js。
```
npm install v-viewer viewerjs
```

引入组件：在 Vue 项目的主文件（如 main.js）中引入 v-viewer 和 viewer.js 的 CSS 文件。

import Vue from 'vue';
import App from './App.vue';
import 'viewerjs/dist/viewer.css';
import VueViewer from 'v-viewer';

Vue.use(VueViewer);

new Vue({
  render: h => h(App),
}).$mount('#app');

2. 图片加载失败

问题描述：在使用 v-viewer 时，图片可能无法正确加载，导致无法浏览。

解决步骤：

检查图片路径：确保图片的路径正确，图片文件存在且可访问。
使用绝对路径：如果图片路径是相对路径，尝试使用绝对路径或确保路径在项目中是正确的。
```
<div class="images" v-viewer>
  <img v-for="src in images" :key="src" :src="src">
</div>
```
调试网络请求：使用浏览器的开发者工具检查网络请求，确保图片请求没有被阻止或返回错误。

3. 自定义工具栏和事件处理

问题描述：新手可能希望自定义 v-viewer 的工具栏或处理特定事件，但不知道如何实现。

解决步骤：

自定义工具栏：通过传递 options 参数来自定义工具栏。

<viewer :options="viewerOptions">
  <img v-for="src in images" :key="src" :src="src">
</viewer>

data() {
  return {
    viewerOptions: {
      toolbar: {
        zoomIn: 4,
        zoomOut: 4,
        oneToOne: 4,
        reset: 4,
        prev: 4,
        next: 4,
        rotateLeft: 4,
        rotateRight: 4,
        flipHorizontal: 4,
        flipVertical: 4,
      },
    },
  };
},

事件处理：通过监听 v-viewer 的事件来处理特定操作。

<viewer @inited="handleViewerInited">
  <img v-for="src in images" :key="src" :src="src">
</viewer>

methods: {
  handleViewerInited(viewer) {
    this.$viewer = viewer;
  },
},

通过以上步骤，新手可以更好地理解和使用 v-viewer 项目，解决常见问题。