基于Vue框架的预览组件xh-image-preview

xh-image-preview基于vue图片预览插件说明具有预览图片基本功能：放大、缩小、1:1、旋转、拖拽、左右切换灵活配置：支持图片预览窗尺寸、操作按钮键可配置使用#安装npm install xh-image-preview#引入import xhImagePreview from 'xh-image-preview'Vue.use(xhImagePrevie...

biubiu640

3357人浏览 · 2019-08-12 11:08:18

biubiu640 · 2019-08-12 11:08:18 发布

xh-image-preview

基于vue图片预览插件

说明

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

使用

#安装
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	默认图片	string	—	images[0]
width/height	预览窗宽/高	String	—	750px/536px
layout	操作按钮，参数名用逗号分隔	String	zoomIn,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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^