{"id":18413203,"url":"https://github.com/dark2017/vue-dark-photo","last_synced_at":"2025-04-07T18:14:53.744Z","repository":{"id":38258152,"uuid":"366959553","full_name":"Dark2017/vue-dark-photo","owner":"Dark2017","description":"vue-dark-photo 一款基于vue2.x封装的轻便简易的图片预览组件，支持放大、缩小、下载、打印等功能。","archived":false,"fork":false,"pushed_at":"2024-06-11T02:01:40.000Z","size":5523,"stargazers_count":136,"open_issues_count":5,"forks_count":39,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-31T12:05:57.875Z","etag":null,"topics":["javascript","photos","vue","vue2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dark2017.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-13T06:46:20.000Z","updated_at":"2025-01-17T16:07:01.000Z","dependencies_parsed_at":"2024-06-11T03:43:50.980Z","dependency_job_id":"5519ccce-3479-4ef0-a5fa-5823f60f4f1b","html_url":"https://github.com/Dark2017/vue-dark-photo","commit_stats":{"total_commits":129,"total_committers":6,"mean_commits":21.5,"dds":"0.15503875968992253","last_synced_commit":"71728385aff7d612a5345bceba4c516e325981e8"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dark2017%2Fvue-dark-photo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dark2017%2Fvue-dark-photo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dark2017%2Fvue-dark-photo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dark2017%2Fvue-dark-photo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dark2017","download_url":"https://codeload.github.com/Dark2017/vue-dark-photo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247704571,"owners_count":20982298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","photos","vue","vue2"],"created_at":"2024-11-06T03:45:14.866Z","updated_at":"2025-04-07T18:14:53.716Z","avatar_url":"https://github.com/Dark2017.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 先上效果图\n\n![demo1.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3248bfb1e99e4e798c8fdb60cdf1dfbc~tplv-k3u1fbpfcp-watermark.image)\n\n![demo2 .gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cfe5a9e79ed441c8e071838a0261bac~tplv-k3u1fbpfcp-watermark.image)\n\n![demo3.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8811becae81549dbbb882133eeab5426~tplv-k3u1fbpfcp-watermark.image)\n\n# 演示地址\nhttps://dark2017.github.io/vue-dark-photo.github.io/\n\n# vue-dark-photo\n\n- 基于 vue2.x 开发的预览图片组件\n- 支持 放大、缩小、复原、下载、打印、旋转、拖拽等功能\n- 支持png、jpg、jpge、bmp、gif等常见图片格式\n- 支持查看多个图片\n- 开箱即用 只需传图片数据 轻便简单\n- GitHub地址：https://github.com/Dark2017/vue-dark-photo.git\n- react同款：https://github.com/Dark2017/react-dark-photo.git\n\n# 安装使用说明\n[![vue-dark-photo](https://nodei.co/npm/vue-dark-photo.png)](https://npmjs.com/package/vue-dark-photo)\n```\nnpm i vue-dark-photo\n\n\n// 在入口（main.js）中引入并挂载\nimport VDPhoto from 'vue-dark-photo'\n// 引入vue-dark-photo 样式\nimport 'vue-dark-photo/lib/vue-dark-photo.css'\n\nVue.use(VDPhoto)\n\n```\n\n```\n//若通过cdn引入 请引入以下链接 版本号自行调整\nhttps://cdn.jsdelivr.net/npm/vue-dark-photo@{verison}/lib/vue-dark-photo.umd.min.js\nhttps://cdn.jsdelivr.net/npm/vue-dark-photo@{verison}/lib/vue-dark-photo.css\n\n```\n# 示例\n\n## 调用全局方法打开\n\n```\nthis.$VDPhoto.show({\n    imgData: \"url\",\n    publish: (val) =\u003e {\n        console.log(val)\n    }\n});\n\n```\n\n## 组件形式打开\n```\n\u003cVDPhoto \n    ref=\"VDPhoto\"\n    :imgData='imgData'\n    @publish='publish'\n    ....\n/\u003e\n\nthis.$refs.VDPhoto.show()\n```\n\n# api\n\n## 属性\n\n| 属性值 |  类型 | 描述 | 默认值 | \n| --- | --- | --- | ---\n| imgData | string | 图片地址(url) | -\n| imgArr | Array | 图片地址(数组) | -\n| isHint | Boolean | 是否展示提示(第一张或最后一张) | true\n| customAction | Object | 自定义操作栏 | null\n| ifWave | Boolean | 是否点击波纹特效 | false\n\n## customAction\n\n| 属性值 |  类型 | 描述 | 默认值 | \n| --- | --- | --- | ---\n| lastCard | Boolean | 是否需要上一张 | true\n| narrow | Boolean | 是否需要缩小 | true\n| reduction | Boolean | 是否需要复原 | true\n| enlarge | Boolean | 是否需要放大 | true\n| leftRotate | Boolean | 是否需要逆时针旋转 | true\n| rightRotate | Boolean | 是否需要顺时针旋转 | true\n| downloadFile | Boolean | 是否需要下载 | true\n| publish | Boolean | 是否需要打印 | true\n| nextCard | Boolean | 是否需要下一张 | true\n| mouseWheel | Boolean | 是否需要滚轮缩放 | true\n| mouseDown | Boolean | 是否需要拖拽功能 | true\n| custom | Array | 自定义操作栏 | -\n\n## custom\n\n| 属性值 |  类型 | 描述 | 默认值 | \n| --- | --- | --- | ---\n| title | String | 悬浮标题 | -\n| onClick | function | 点击回调 | -\n| style | Object | 操作按钮样式 | -\n| content | String | 操作按钮内容 | -\n\n## 事件\n\n| 事件名 |  说明 | 回调参数\n| --- | --- | ---\n| publish | 打印后的回调 | 打印的内容\n| close | 关闭后的回调 | -\n\n## 方法\n\n| 方法名 |  说明 | \n| --- | --- | \n| show | 打开photo | \n| ··· | ··· | \n\n\n## 注意\n\n- 通过this.$refs.VDPhoto.show()来打开组件\n- 若引用图片地址，相对地址使用require()包裹或使用绝对地址\n- 若imgData 和 imgArr 同时传了 则只有imgData生效\n- 不支持 base64\n# 最后\n\n- 如果对你有帮助，请star一个哦，你的鼓励是我创作的动力\n- 欢迎来到我的博客，希望能对你有所帮助\n- 掘金：https://juejin.cn/user/2339399368751325/posts\n- csdn：https://blog.csdn.net/weixin_44083712?spm=1010.2135.3001.5343\n- csdn | 掘金 | 知乎 同名： 饼干_  或  饼干 \n- 最后的最后，喜欢的话一键三连噢~\n\n# 更新日志\n\n- 2021-7-7\n- travis 小版本自动部署迭代\n- node 大版本手动迭代版本号\n\n- 2021-6-3\n- 新增波纹特效\n- 优化项目结构\n\n- 2021-6-1\n- 新增自定义操作栏\n\n- 2021-5-22\n- 新增提示功能\n- 添加图片旋转动画\n- 优化图片旋转功能\n\n- 2021-5-21\n- 新增图片数组功能；移除默认插槽和图片名\n- 下载时截取文件名作为图片名\n\n- 2021-5-20\n- 解耦elementui、引用阿里图标库\n- 去除word等文档预览功能\n\n- 2021-5-17\n- 支持更多图片格式、代码优化\n\n- 2021-5-14 \n- 去除打印的页眉、页脚优化打印相关功能\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdark2017%2Fvue-dark-photo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdark2017%2Fvue-dark-photo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdark2017%2Fvue-dark-photo/lists"}