vue圖片點擊放大功能
阿新 • • 發佈：2019-01-15
翻轉 div images == mov term 縮略圖 功能 右上角
因項目需求（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文件中覆蓋它的樣式
vue圖片點擊放大功能