[VUE] image preview zoom plugin

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

When looking at the project, suddenly see an image preview pop, stiff feeling good, can not zoom, can not be switched, so they find on the Internet under the picture preview plug-ins, we have found three plug-in, see the specific advantages and disadvantages of their own use it, I just see the results in the current computers are viewerjs plug-in , based on photoswipe of vue-photo-preview plug-ins and vue-picture-preview plug-ins

---

The first: viewerjs use Description

viewerjs plug Screenshot

1, installed dependent
npm install v-viewer --save

2, reference and registration call within 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, the code used 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 using the configuration parameters

---

The second: vue-photo-preview Introduction to use

vue-photo-preview plug-in screenshot

 

1, installed dependent
npm install vue-photo-preview --save

2, reference and registration call within main.js

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

3, the code used 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> 

Check the configuration option http://photoswipe.com/documentation/options.html

---

Third: vue-picture-preview use Introduction

vue-picture-preview plug-in screenshot

 

1, installed dependent
npm install vue-picture-preview --save

2, reference and registration call within main.js

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

3, was added lg-preview position in the root element of the assembly

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

4, the code used 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> 

to sum up

这三个插件介绍完了，除了第三种vue-picture-preview插件只有预览和切换上下张功能，另外两种都有放大和缩小（包括手势）以及其他功能。还是蛮好上手的插件，但我是更喜欢第一种