【VUE】圖片預覽放大縮小插件

From: https://www.jianshu.com/p/e3350aa1b0d0

在看項目時，突然看到預覽圖片的彈窗，感覺好僵硬，不能放大，不能切換，於是便在網上找下關於圖片預覽的插件，有找到三個插件，具體的優劣勢的看自己的使用吧，我目前只是在電腦查看效果，分別是viewerjs插件、基於photoswipe的vue-photo-preview插件以及vue-picture-preview插件

---

第一種：viewerjs使用介紹

viewerjs插件截圖

1、先安裝依賴
npm install v-viewer --save

2、main.js內引用並注冊調用

//main.js import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' 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、代碼中使用xxx.vue

<template> <div class="content"> <h1>Viewer圖片預覽插件</h1> <viewer :images="imgs"> <img v-for="src in imgs" :src="src.url" :key="src.title"> </viewer> </div> </template> <script> export default { data () { return { imgs: [ { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg', title: '圖片1' }, { url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg', title: '圖片2' } ] } }, } </script> 

viewerjs使用配置參數

---

第二種：vue-photo-preview使用介紹

vue-photo-preview插件截圖

 

1、先安裝依賴
npm install vue-photo-preview --save

2、main.js內引用並注冊調用

//main.js import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) 

3、代碼中使用xxx.vue

<template> <div class="content"> <section> <h1>preview圖片預覽插件</h1> <img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title"> </section> </div> </template> <script> export default { data () { return { imgs: [ { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg', title: '圖片1', preview: '1' }, { url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg', title: '圖片2', preview: '1' } ] } }, } </script> 

option配置請查看 http://photoswipe.com/documentation/options.html

---

第三種：vue-picture-preview使用介紹

vue-picture-preview插件截圖

 

1、先安裝依賴
npm install vue-picture-preview --save

2、main.js內引用並注冊調用

//main.js iimport vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview) 

3、在根組件添加 lg-preview 組件的位置

<!-- APP.vue --> <div id="app"> <router-view></router-view> <lg-preview></lg-preview> </div> 

4、代碼中使用xxx.vue

<template> <div class="content"> <h1>vuePicturePreview圖片預覽插件</h1> <img v-for="(img,index) in imgs" v-preview="img.url" :src="img.url" :alt="img.title" :key="index" preview-title-enable="true" preview-nav-enable="true"> </div> </template> <script> export default { data () { return { imgs: [ { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg', title: '圖片1' }, { url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg', title: '圖片2' } ] } }, } </script> 

總結

這三個插件介紹完了，除了第三種vue-picture-preview插件只有預覽和切換上下張功能，另外兩種都有放大和縮小（包括手勢）以及其他功能。還是蠻好上手的插件，但我是更喜歡第一種