先上效果图

vue-dark-photo

• 基于 element-ui2.x 开发的预览图片组件
• 支持 放大、缩小、复原、下载、打印等功能
• 支持在线预览pdf、word等文档
• 暂时只支持jpg、png格式的图片
• 继承 el-dialog 等组件的属性事件等
• 适合使用了element-ui的项目
• GitHub地址：github.com/Dark2017/vu…
• 适用vue2.X的项目

安装使用说明

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'
// 引入element 样式
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(VDPhoto)


复制代码

示例

调用全局方法打开(适合简单使用)

this.$VDPhoto.show({
    imgData: "url",
    imgName: '图片名',
    title: 'title',
});

复制代码

组件形式打开(适合需要额外功能)

<VDPhoto 
    ref="VDPhoto"
    :imgData='imgData'
    :imgName='imgName'
    :title='title'
    @publish='publish'
    ....
/>

复制代码

api

属性

事件

方法

插槽

注意

• el-dialog的属性及方法等也可以使用具体可移至：element.eleme.cn/#/zh-CN/com…
• 该组件中visible属性建议不要使用以免产生不必要的BUG，通过this.$refs.VDPhoto.show()来打开组件

最后

• 如果对你有帮助，请star一个哦，你的鼓励是我创作的动力
• 有任何疑问或者建议，欢迎给我留言，我会及时回复
• 欢迎来到我的博客，希望能对你有所帮助
• 掘金：juejin.cn/user/233939…
• csdn：blog.csdn.net/weixin_4408…
• csdn | 掘金 | 知乎 同名： 饼干_ 或 饼干