基于vue的简单轻便的开源图片预览组件

先上效果图

demo1.gif

demo2 .gif

demo3.gif

演示地址

dark2017.github.io/vue-dark-ph…

vue-dark-photo

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

安装使用说明

vue-dark-photo

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 | 掘金 | 知乎 同名: 饼干_ 或 饼干

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14725.html

发表评论

登录后才能评论