利用v-viewer圖片預(yù)覽插件放大需要預(yù)覽的圖片

更新時(shí)間：2024年10月12日 10:46:16 作者：臨淵~羨魚

本文介紹了v-viewer插件的安裝和使用步驟,包括npm安裝、在main.js文件中全局引入,以及常用的三種使用方式,文章提供了簡(jiǎn)單的布局頁面效果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、頁面效果

更多內(nèi)容和效果在官網(wǎng)地址查看，官網(wǎng)地址：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.完整代碼

我這里寫了常用的三種使用方式，頁面效果我只是簡(jiǎn)單的布局，不要在意這個(gè)小細(xì)節(jié)，下面是代碼：

<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">點(diǎn)擊展示圖片</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>

附：新手使用注意事項(xiàng)及解決方案

1. 安裝和引入問題

問題描述：新手在安裝 v-viewer 時(shí)，可能會(huì)遇到依賴包未正確安裝或引入失敗的問題。

解決步驟：

安裝依賴：確保通過 npm 或 yarn 正確安裝 v-viewer 和 viewer.js。
```
npm install v-viewer viewerjs
```

引入組件：在 Vue 項(xiàng)目的主文件（如 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 時(shí)，圖片可能無法正確加載，導(dǎo)致無法瀏覽。

解決步驟：

檢查圖片路徑：確保圖片的路徑正確，圖片文件存在且可訪問。
使用絕對(duì)路徑：如果圖片路徑是相對(duì)路徑，嘗試使用絕對(duì)路徑或確保路徑在項(xiàng)目中是正確的。
```
<div class="images" v-viewer>
  <img v-for="src in images" :key="src" :src="src">
</div>
```
調(diào)試網(wǎng)絡(luò)請(qǐng)求：使用瀏覽器的開發(fā)者工具檢查網(wǎng)絡(luò)請(qǐng)求，確保圖片請(qǐng)求沒有被阻止或返回錯(cuò)誤。

3. 自定義工具欄和事件處理

問題描述：新手可能希望自定義 v-viewer 的工具欄或處理特定事件，但不知道如何實(shí)現(xiàn)。

解決步驟：

自定義工具欄：通過傳遞 options 參數(shù)來自定義工具欄。

<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,
      },
    },
  };
},

事件處理：通過監(jiān)聽 v-viewer 的事件來處理特定操作。

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

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

通過以上步驟，新手可以更好地理解和使用 v-viewer 項(xiàng)目，解決常見問題。