hevue-img-preview简介本组件基于vuevue图片预览组件，支持PC端和移动端，支持单图和多图预览。只传入一个图片URL，实现图片预览效果。手机支持单指拖动和两指缩放。页面各组件颜色可自定义，实现个性化设计。如果对你有帮助，希望你移步GitHub，或者码云给个小星星。如果您有任何意见或建议，请回复或提交issure示例预览在线预览网址https://heyongsheng.github.io/#/installation#安装npminstallhevue-img-preview--save#main.jsimportimporthevueImgPreviewfrom'hevue-img-preview'Vue.use(hevueImgPreview)#给任意对象添加任意事件，比如调用事件中的方法预览方法：{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#ffforrgba(255,255,255,.1)控制条字体颜色(可选)controlBackground#ffforrgba(255,255,255,.1)控制条背景色(optional)closeColor#ffforrgba(255,255,255,.1)关闭图标的颜色（可选）多个布尔值true/false是否以nowImgIndexNumber格式预览多张图片，如果默认显示第二张图片，则显示图片下标默认1多图预览时传入imgListArray格式[url1,url2,url3]多图预览时传入的数组键盘布尔值是否为true/false启用键盘控件clickMaskCLose字符串打开/关闭遮罩单击遮罩层可以关闭图层。启用键盘控制事件后，对应的功能控制按钮如下。放大s缩小a上一页d下一页q逆时针旋转e顺时针旋转r图片重置esc关闭图片预览*如果不考虑兼容性问题，以上背景色都可以接受渐变色我工作经验少，试试确保我写的东西没有错误，但性能接口可能不是最优的。如果大家在使用中有什么建议或者意见，欢迎反馈给我，可以添加联系方式，也可以直接回复，或者在GitHub上提交issur【建议此方法】。如果对你有帮助，期待你在GitHub上点个赞，点个star。您的支持是我前进的最大动力。如果你能去底下打赏，祝你一生平安，永不掉头发GitHub链接：https://github.com/heyongsheng/hevue-img-preview码云链接：https://gitee.com/ihope_top/hevue-img-预览
