code前端网先上效果图
演示地址
dark2017.github.io/vue-dark-ph…
vue-暗图像
- 基于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 | 绳子 | 图片的URL（url） | – |
| imgArr | 阵列 | 图像地址（矩阵） | – |
| 是提示 | 布尔值 | 如果您想显示提示（第一个或最后一个） | 真实 |
活动
| 活动名称 | 描述 | 回调参数 |
|---|---|---|
| 发布 | 打印后回调 | 印刷内容 |
| close | 关门后回电 | – |
方法
| 方法名称 | 使用说明 |
|---|---|
| 表演 | 打开图片 |
| ··· | ··· |
注意
- 通过this.$refs.VDPhoto.show()打开组件
- 如果引用图像地址，请使用 require() 包装相对地址或使用绝对地址
- 如果imgData和imgArr同时发送，则只有imgData生效
终于
- 如果对您有帮助，请给个star。您的鼓励是我创作的动力
- 欢迎来到我的博客，希望对您有帮助
- 掘金：juejin.cn/user/233939…
- csdn：blog.csdn.net/weixin_4408…
- csdn |掘金|知乎同名：biscuit_或biscuit
