博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue基于viewer实现的图片查看器
阅读量:7197 次
发布时间:2019-06-29

本文共 813 字,大约阅读时间需要 2 分钟。

vue2-viewer

vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能

vue2-viewer 是viewer.js vue的实现,效果以及样式完全移植自viewer.js关于viewer.js可以参考链接 []

插件中所有的效果均大量地使用了css3的新特性替换了viewer.js中的js动画,所以vue2-viewer主要实用场景是现代浏览器中。

使用文档

安装

npm install --save vue2-viewer复制代码

在main.js中引入并使用插件

import ImageViewer from 'vue2-viewer';Vue.use(ImageViewer);复制代码

插件会在全局注册vue-viewer组件

使用组件

vue2-viewer 提供两种使用模式,单图片模式和多图列表模式。

单图片模式

props

参数 说明 类型 必须
thumb 要显示的小图的链接 string true
full 点击放大后的大图链接 string true

示例:

复制代码

效果展示:

多图片模式

props

参数 说明 类型 必须
thumb 要显示的小图列表的链接数组 array true
full 点击放大后的大图的链接数组 array true
list-ul-class 默认小图的列表外层ul的自定义class 用于自定义列表的样式,包括ul内部的slot的内容的样式都可以通过这个方式自定义 string false

Scoped Slot

name 说明
~ 列表中的每一个元素中除了默认图以外的内容

示例:

复制代码

效果展示:

转载于:https://juejin.im/post/5cb04acc5188251b2b20b41e

你可能感兴趣的文章
面试题解(1):单向链表相关
查看>>
Qt一步一步实现插件调用(附源码)
查看>>
Ext.grid.CheckboxSelectionModel状态设置
查看>>
IIS负载均衡(转)
查看>>
[原创]用C#实现微信“跳一跳”小游戏的自动跳跃助手
查看>>
Presentation–Introduction
查看>>
【软件】图文解释XCode常用快捷键的使用
查看>>
c# 实现文件浏览功能
查看>>
Linux 小知识翻译 - 「cron」
查看>>
synchronized关键字,Lock接口以及可重入锁ReentrantLock
查看>>
wait、notify、notifyAll的阻塞和恢复
查看>>
一些Perl例程(全部手打并执行过)
查看>>
“精确”判断一个浮点数是否等于0
查看>>
《Java与模式》- 行为型模式
查看>>
WPF 中 ICollectionView 及 ItemsControl 相关的重点
查看>>
九、 编写Module模块
查看>>
使用Bower作为Web包管理器
查看>>
Android中实现Launcher功能之二 ----- 添加窗口小部件以及AppWidget的创建详解
查看>>
关于如何准备一场演讲 - 清单
查看>>
C++返回值优化RVO
查看>>