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的图片预览插件