先上效果图

演示地址

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

特点

活动

方法

注意

• 通过this.$refs.VDPhoto.show()打开组件
• 如果引用图像地址，请使用 require() 包装相对地址或使用绝对地址
• 如果imgData和imgArr同时发送，则只有imgData生效

终于

• 如果对您有帮助，请给个star。您的鼓励是我创作的动力
• 欢迎来到我的博客，希望对您有帮助
• 掘金：juejin.cn/user/233939…
• csdn：blog.csdn.net/weixin_4408…
• csdn |掘金|知乎同名：biscuit_或biscuit