vue圖片點擊放大功能

因項目需求（ui框架element-ui），需要實現圖片的點擊放大，還要能旋轉以及上下切換。當時第一反應，element-ui好像沒有這樣的組件，就想過自己寫，但是那個旋轉翻頁上下切換感覺有點麻煩，不甘心，就在GitHub找找找.........還真找到一個適合vue的插件，叫 viewerjs ，GitHub地址：https://github.com/fengyuanchen/viewerjs 。

說實話，它的功能還是很多很強大的，大家可以自己去看。主要使用的旋轉、翻轉、縮放、上下切換、鍵盤操作等功能都有。

1、首先是安裝

npm install v-viewer --save

2、安裝完引用（還要記得引用它的css樣式）

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

 

3、vue注冊調用

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" }
});

 

說明：

名稱	默認值	說明
inline	false	啟用 inline 模式
button	true	顯示右上角關閉按鈕
navbar	true	顯示縮略圖導航
title	true	顯示當前圖片的標題
toolbar	true	顯示工具欄
tooltip	true	顯示縮放百分比
movable	true	圖片是否可移動
zoomable	true	圖片是否可縮放
rotatable	true	圖片是否可旋轉
scalable	true	圖片是否可翻轉
transition	true	使用 CSS3 過度
fullscreen	true	播放時是否全屏
keyboard	true	是否支持鍵盤
url	src	設置大圖片的 url

4、代碼中使用

4.1、圖片列表代碼:

<div>
    <viewer :images="signImages">
        <img v-for="src in signImages" :src="src" :key="src" width="50">
    </viewer>
</div>

let signImages = [
    'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',
    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg'
]

 

隨便弄了兩張圖片

放大后效果圖：

這樣就完成了，但是，點擊放大后你會發現下面有很多按鈕，需求往往不需要這么多，所以可自行配置 Options 里面的值，但是為了統一，我更傾向於直接修改那些按鈕的css，每個按鈕有個獨立的class，我們可以在自己的css文件中覆蓋它的樣式