先上效果图

演示地址

https://dark2017.github.io/vue-dark-photo.github.io/

vue-dark-photo

• 基于 vue2.x 开发的预览图片组件
• 支持 放大、缩小、复原、下载、打印、旋转、拖拽等功能
• 支持png、jpg、jpge、bmp、gif等常见图片格式
• 支持查看多个图片
• 开箱即用 只需传图片数据 轻便简单
• GitHub地址：https://github.com/Dark2017/vue-dark-photo.git
• react同款：https://github.com/Dark2017/react-dark-photo.git

安装使用说明

npm i vue-dark-photo


// 在入口（main.js）中引入并挂载
import VDPhoto from 'vue-dark-photo'
// 引入vue-dark-photo 样式
import 'vue-dark-photo/lib/vue-dark-photo.css'

Vue.use(VDPhoto)

//若通过cdn引入 请引入以下链接 版本号自行调整
https://cdn.jsdelivr.net/npm/vue-dark-photo@{verison}/lib/vue-dark-photo.umd.min.js
https://cdn.jsdelivr.net/npm/vue-dark-photo@{verison}/lib/vue-dark-photo.css

示例

调用全局方法打开

this.$VDPhoto.show({
    imgData: "url",
    publish: (val) => {
        console.log(val)
    }
});

组件形式打开

<VDPhoto 
    ref="VDPhoto"
    :imgData='imgData'
    @publish='publish'
    ....
/>

this.$refs.VDPhoto.show()

api

属性

属性值	类型	描述	默认值
imgData	string	图片地址(url)	-
imgArr	Array	图片地址(数组)	-
isHint	Boolean	是否展示提示(第一张或最后一张)	true
customAction	Object	自定义操作栏	null
ifWave	Boolean	是否点击波纹特效	false

customAction

属性值	类型	描述	默认值
lastCard	Boolean	是否需要上一张	true
narrow	Boolean	是否需要缩小	true
reduction	Boolean	是否需要复原	true
enlarge	Boolean	是否需要放大	true
leftRotate	Boolean	是否需要逆时针旋转	true
rightRotate	Boolean	是否需要顺时针旋转	true
downloadFile	Boolean	是否需要下载	true
publish	Boolean	是否需要打印	true
nextCard	Boolean	是否需要下一张	true
mouseWheel	Boolean	是否需要滚轮缩放	true
mouseDown	Boolean	是否需要拖拽功能	true
custom	Array	自定义操作栏	-

custom

属性值	类型	描述	默认值
title	String	悬浮标题	-
onClick	function	点击回调	-
style	Object	操作按钮样式	-
content	String	操作按钮内容	-

事件

事件名	说明	回调参数
publish	打印后的回调	打印的内容
close	关闭后的回调	-

方法

方法名	说明
show	打开photo
···	···

注意

• 通过this.$refs.VDPhoto.show()来打开组件
• 若引用图片地址，相对地址使用require()包裹或使用绝对地址
• 若imgData 和 imgArr 同时传了 则只有imgData生效
• 不支持 base64

最后

• 如果对你有帮助，请star一个哦，你的鼓励是我创作的动力
• 欢迎来到我的博客，希望能对你有所帮助
• 掘金：https://juejin.cn/user/2339399368751325/posts
• csdn：https://blog.csdn.net/weixin_44083712?spm=1010.2135.3001.5343
• csdn | 掘金 | 知乎 同名： 饼干_ 或 饼干
• 最后的最后，喜欢的话一键三连噢~

更新日志

• 2021-7-7

• travis 小版本自动部署迭代

• node 大版本手动迭代版本号

• 2021-6-3

• 新增波纹特效

• 优化项目结构

• 2021-6-1

• 新增自定义操作栏

• 2021-5-22

• 新增提示功能

• 添加图片旋转动画

• 优化图片旋转功能

• 2021-5-21

• 新增图片数组功能；移除默认插槽和图片名

• 下载时截取文件名作为图片名

• 2021-5-20

• 解耦elementui、引用阿里图标库

• 去除word等文档预览功能

• 2021-5-17

• 支持更多图片格式、代码优化

• 2021-5-14

• 去除打印的页眉、页脚优化打印相关功能