首页 > 建站教程 > 前端框架 >  基于vue的v-viewer点击预览图片插件正文

基于vue的v-viewer点击预览图片插件

v-viewer是一款基于vue的点击图片放大预览插件,支持左右切换上一张下一张图片,支持缩放图片、按住拖拽图片、预览图效果,斜切、旋转图片等功能,界面美观,还支持手机端,是一款不可多得的图片查看器,此外,它其实就是 viewer.js 的vue版本。下面简单说下它的使用方法:

一、安装
npm install v-viewer --save
二、使用方法:
方法1:
<div class="images" v-viewer>
        <img v-for="(item2,index2) in item.picList.split(',')" :key="'img'+index2" :src="item2" />
</div>

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
方法2:
<viewer :images="images">
     <img v-for="src in images" :src="src" :key="src">
</viewer>
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
export default {
    data() {
        images: ['1.jpg', '2.jpg']
    }
}
以上两种方法都没问题,我爱模板网经过实战测试过!