前人铺路系列组件之hevue-img-preview，一款传入地址支持单图多图预览的vue图片预览组件

hevue-img-preview 简介

❝

本组件是一个基于 vue 编写的 vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，便可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色都可可自定义，实现个性化设计。若是能帮上你，但愿能够移步 GitHub ，或者码云 给个小星星，若是有任何使用意见或建议，也欢迎回复或者提交issure

❞

示例预览

在线文档

安装

# 安装
npm install hevue-img-preview --save  # main.js 引入 import hevueImgPreview from 'hevue-img-preview' Vue.use(hevueImgPreview)  # 使用 给任意对象添加任意事件，例如 <img :src="src" @click="previewImg(url)"> 便可在事件里调用方法进行预览 methods: {  previewImg (url) {  this.$hevueImgPreview(url)  } }  复制代码

使用

❝

this.$hevueImgPreview() 方法能够接收一个字符串类型的 url，或者对象类型的配置，具体使用方法以下

❞

• 接收一个地址字符串this.$hevueImgPreview(url)

this.$hevueImgPreview('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg') // 线上地址
this.$hevueImgPreview('./img/logo.jpeg') // 本地地址 复制代码

• 接收一个对象this.$hevueImgPreview(options)

# 单图预览
this.$hevueImgPreview({  url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',  mainBackground: 'rgba(0, 0, 0, .5)', // 总体背景颜色 })  # 多图预览 this.$hevueImgPreview({  multiple: true, // 开启多图预览模式  nowImgIndex: 1, // 多图预览，默认展现第二张图片  imgList: ['1.png', '2.png', '3.png'], // 须要预览的多图数组  mainBackground: 'rgba(0, 0, 0, .5)', // 总体背景颜色 }) 复制代码

具体可配置项以下

字段	值	备注
url	图片的本地或者线上地址，多图预览时可不传	预览的图片地址，多图预览时省略
mainBackground	#fff 或者 rgba(255,255,255,.1)	总体背景颜色（可选）
controlColor	#fff 或者 rgba(255,255,255,.1)	控制条字体颜色（可选）
controlBackground	#fff 或者 rgba(255,255,255,.1)	控制条背景颜色 （可选）
closeColor	#fff 或者 rgba(255,255,255,.1)	关闭图标的颜色 （可选）
multiple	布尔值 true/false	是否多图预览
nowImgIndex	Number格式，如默认展现第二张，传入1	多图预览时默认显示的图片下标
imgList	Array格式 [url1, url2, url3]	多图预览时传入的数组
keyboard	布尔值 true/false	是否开启键盘控制
clickMaskCLose	字符串 open/close	是否开启点击遮罩层关闭，默认为开启

如开启键盘控制事件后，相对应功能控制按键以下

按键	功能
w	放大
s	缩小
a	上一张
d	下一张
q	逆时针旋转
e	顺时针旋转
r	图片复位
esc	关闭图片预览

*如不考虑兼容性问题，上述的背景颜色都可接收渐变色

做者注

❝

本人前端小白一枚，工做经验较少，所写东西尽可能保证没bug，但性能界面什么的可能没办法作到最优，若是您有什么使用中的建议或意见，欢迎反馈给我，能够加联系方式，也能够直接回复，或者到GitHub提个issur[建议此方法]，若是对您有所帮助，万分期待您能给个赞而且到GitHub给个小星星，您的支持是我前进的最大动力。

❞

❝

GitHub连接：github.com/heyongsheng…

❞

❝

码云连接：gitee.com/ihope_top/h…

❞