v-picview---vue图片预览组件+类微信小程序image组件的vue图片组件，轻巧实用

v-picview图片预览插件

一款基于Vue，typescript编写的v-picview图片预览插件，并不是插件的二次开发，纯自造轮子，体积小，引用少，实用。
包括了类似微信小程序image组件的vImage组件，可以自定义宽高后，自定义不同的图片显示方式，该组件还有属性设置是否点击进行图片放大预览。
预览模式的开启还可以使用指令方式：v-picview。

如何使用

//安装依赖
npm i v-picview -S

注意需要引入v-picview.css

import Vue from 'vue'
import 'v-picview/lib/v-picview.css'
import vPicview from 'v-picview'
import { vImage } from 'v-picview'
Vue.component(vImage)
Vue.use(vPicview,{
	escClose:true,
    arrowShortcuts:true,
    zoom:true,
    footer:true,
    animation:'fadein',
    popperClass:'my-picview-box',
    onDownload(item:any){
        console.log(item)
    },
    onNext(index:number, item:object, oldItem:object){
        console.log('下一页',index,item,oldItem)
    },
    onPrev(index:number, item:object, oldItem:object){
        console.log('上一页',index,item,oldItem)
    },
    onChange(index:number, item:object, oldItem:object){
        console.log('页数改变',index,item,oldItem)
    },
    onImgLoaded(e:any){
        console.log('图片加载完成',e)
    },
    onZoomIned(e:any){
        console.log('图片放大',e)
    },
    onZoomOuted(e:any){
        console.log('图片缩小',e)
    },
    onDragStart(e:any){
        console.log('拖拽开始',e)
    },
    onDragMove(e:any){
        console.log('拖拽中',e)
    },
    onDragEnd(e:any){
        console.log('拖拽结束',e)
    }
})

包括两种预览模式，vImage组件模式和v-picview指令模式

<!-- Component mode initialization -->
<v-image 
    class="inline-block" 
    describe="group set-1" 
    :src="require('@/assets/pic1.png')" 
    mode="aspectFit" 
    group="set-1" 
/>

<!-- Directive mode initialization -->
<img 
    src="~@/assets/logo.png" 
    v-picview="{group:'set-2',describe:'group set-2'}" 
/>

v-picview指令的属性参数

Attr. Name	Description	Required	Default Value
describe	图片的描述，如果打开了vPicview的footer会显示在底部	N
group	图片的分组，如果是同一分组的图片，在图片查看器里面可以进行左右切换查看	N	-

vImage组件的属性参数

Attr. Name	Description	Required	Default Value
width	图片的宽度	N	350px
height	图片的高度	N	350px
src	图片的地址路径	Y
describe	图片的描述，如果打开了vPicview的footer会显示在底部	N
viewSrc	图片查看器的图片地址路径，如果不填写，则默认取src	N
group	图片的分组，如果是同一分组的图片，在图片查看器里面可以进行左右切换查看	N	-
noView	点击是否打开图片查看器，默认是点击后打开查看器	N	false
mode	scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。 aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 aspectFill：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。	N	scaleToFill

vPicview预览组件的属性参数

vPicview预览组件会在body下面渲染一个全屏预览盒子，即入口文件初始化组件的时候的属性参数

import Vue from 'vue'
import 'v-picview/lib/v-picview.css'
import vPicview from 'v-picview'
Vue.use(vPicview,{
	...
	})

Attr. Name	Description	Required	Default Value
arrowShortcuts	是否启用左右箭头键切换图片页数	N	true
zoom	是否需要放大功能	N	true
footer	是否启用底部栏显示描述	N	true
animation	打开的动画：fadein，flyin	N	fadein
popperClass	图片查看器的class	N	-
onDownload	点击下载图标的回调函数	N	-
onNext	触发下一页图片时的回调函数	N	-
onPrev	触发上一页图片时的回调函数	N	-
onChange	页数改变时的回调函数	N	-
onImgLoaded	图片查看器在图片加载完成后的回调函数	N	-
onZoomIned	图片放大时的回调函数	N	-
onZoomOuted	图片缩小时的回调函数	N	-
onDragStart	图片放大后拖动开始时的回调函数	N	-
onDragMove	图片放大后拖动进行中的回调函数	N	-
onDragEnd	图片放大后拖动结束时的回调函数	N	-

vPicview的方法

window.$picview可直接获取vPicview的实例

• download() 下载查看器当前显示的图片
• close() 关闭查看器
• next() 下一页图片
• prev() 上一页图片

感谢阅览

v-picview图片预览插件，一款基于vue的图片预览插件