利用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 alt=""
    />
<!--    第三种方式-->
    <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 项目，解决常见问题。

总结 

到此这篇关于利用v-viewer图片预览插件放大需要预览的图片的文章就介绍到这了,更多相关v-viewer图片预览插件放大图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！