xh-image-preview

基于vue图片预览插件

说明

  1. 具有预览图片基本功能:放大、缩小、1:1、旋转、拖拽、左右切换
  2. 灵活配置:支持图片预览窗尺寸、操作按钮键可配置

使用

#安装
npm install xh-image-preview 
#引入
import xhImagePreview from 'xh-image-preview'
Vue.use(xhImagePreview)
基本用法
#预览单张图
<imagePreview :visible.sync="visible" :images="images"></imagePreview>

#预览多张图
#支持左右切换,defaultImage为打开窗口第一张图片,默认为传入图片数组中第一张
<imagePreview :visible.sync="visible" :images="images" :defaultImage="defaultImage"></imagePreview>
属性设置
#设置图片预览窗尺寸:600px*500px
<imagePreview :visible.sync="visible" :images="images" width="600px" height="500px"></imagePreview>

#设置图片操作按钮键:默认zoomIn,zoomOut,actualSize,rotate,total
<imagePreview :visible.sync="visible" :images="images" layout="zoomIn,zoomOut,rotate"></imagePreview>

属性介绍

参数说明类型可选值默认值
images预览图片集Array
defaultImage默认图片stringimages[0]
width/height预览窗宽/高String750px/536px
layout操作按钮,
参数名用逗号分隔
StringzoomIn,zoomOut,
actualSize,rotate,total
zoomIn,zoomOut,
actualSize,rotate,total

方法

方法名称说明
prev预览上一张图片
next预览下一张图片
rotate逆时针旋转图片
zoomIn放大图片
zoomOut缩小图片
actualSize预览图片1:1尺寸

详情见xh-image-preview https://www.npmjs.com/package/xh-image-preview

Logo

前往低代码交流专区

更多推荐