hevue-img-preview

hevue-img-preview 简介

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

示例预览

在线预览网址 https://heyongsheng.github.io/#/

安装

# 安装
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	String	无	预览的图片地址，多图预览时省略
mainBackground	String	rgba(0,0,0,.4)	整体背景颜色（可选）
controlColor	String	rgba(255,255,255,.6)	控制条字体颜色（可选）
controlBackground	String	rgba(61, 61, 61, .4)	控制条背景颜色 （可选）
closeColor	String	rgba(61, 61, 61, .4)	关闭图标的颜色 （可选）
multiple	Boolean	false	是否多图预览
nowImgIndex	Number	0	多图预览时默认显示的图片下标
imgList	Array	无	多图预览时传入的图片数组
keyboard	Boolean	false	是否开启键盘控制
clickMaskCLose	Boolean	false	是否可以点击遮罩层关闭

全局配置

以下配置可以在引入插件时全局配置，之后便无需在调用的时候重复配置

字段	类型	默认值	备注
mainBackground	String	rgba(0,0,0,.4)	整体背景颜色（可选）
controlColor	String	rgba(255,255,255,.6)	控制条字体颜色（可选）
controlBackground	String	rgba(61, 61, 61, .4)	控制条背景颜色 （可选）
closeColor	String	rgba(61, 61, 61, .4)	关闭图标的颜色 （可选）
keyboard	Boolean	false	是否开启键盘控制
clickMaskCLose	Boolean	false	是否可以点击遮罩层关闭

// main.js
import hevueImgPreview from './lib/index'
Vue.use(hevueImgPreview, {
  keyboard: true,
  clickMaskCLose: true,
  mainBackground: 'rgba(0,0,0,.4)'
  ...
})

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

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

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

作者注

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

GitHub 链接：https://github.com/heyongsheng/hevue-img-preview

码云链接：https://gitee.com/ihope_top/hevue-img-preview

作者 QQ：1378431028

QQ 群：595472617

作者微信：heyongsheng1996