先上效果图
演示地址
dark2017.github.io/vue-dark-ph…
vue-dark-photo
- 基于 vue2.x 开发的预览图片组件
- 支持 放大、缩小、复原、下载、打印、旋转、拖拽等功能
- 支持png、jpg、jpge、bmp、gif等常见图片格式
- 支持查看多个图片
- 开箱即用 只需传图片数据 轻便简单
- GitHub地址：github.com/Dark2017/vu…
安装使用说明
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",
title: 'title',
});
组件形式打开(适合需要额外功能)
<VDPhoto
ref="VDPhoto"
:imgData='imgData'
:title='title'
@publish='publish'
....
/>
api
属性
| 属性值 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| imgData | string | 图片地址(url) | – |
| imgArr | Array | 图片地址(数组) | – |
| isHint | Boolean | 是否展示提示(第一张或最后一张) | true |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| publish | 打印后的回调 | 打印的内容 |
| close | 关闭后的回调 | – |
方法
| 方法名 | 说明 |
|---|---|
| show | 打开photo |
| ··· | ··· |
注意
- 通过this.$refs.VDPhoto.show()来打开组件
- 若引用图片地址，相对地址使用require()包裹或使用绝对地址
- 若imgData 和 imgArr 同时传了 则只有imgData生效
最后
- 如果对你有帮助，请star一个哦，你的鼓励是我创作的动力
- 欢迎来到我的博客，希望能对你有所帮助
- 掘金：juejin.cn/user/233939…
- csdn：blog.csdn.net/weixin_4408…
- csdn | 掘金 | 知乎 同名： 饼干_ 或 饼干
