vue2-viewer
github仓库地址
vue2-viewer 是一款强大的图像浏览插件,可以实现图像的放大预览,旋转,任意比例放大和缩小等功能
vue2-viewer 是viewer.js vue的实现,效果以及样式完全移植自viewer.js关于viewer.js可以参考链接 [http://fengyuanchen.github.io/viewer/]
插件中所有的效果均大量地使用了css3的新特性替换了viewer.js中的js动画,所以vue2-viewer主要实用场景是现代浏览器中。
演示地址
版本说明
- 1.0.3 处理列表数据问题
- 1.0.2 解决样式未生效问题
- 1.0.1 更换脚手架,修改图片切换后状态没重置的问题
- 0.1.0 正式上线版本
- 0.0.1 修改了放大后图片的标题无法显示的问题,新增title组件属性
使用文档
安装
npm install --save vue2-viewer
在main.js中引入并使用插件
;Vue;
插件会在全局注册vue-viewer组件
使用组件
vue2-viewer 提供两种使用模式,单图片模式和多图列表模式。
单图片模式
props
参数 | 说明 | 类型 | 必须 |
---|---|---|---|
thumb | 要显示的小图的链接 | string | true |
full | 点击放大后的大图链接 | string | true |
title | 点击放大后大图下面要展示的图片说明 | string | false |
示例:
效果展示:
多图片模式
props
参数 | 说明 | 类型 | 必须 |
---|---|---|---|
thumb | 要显示的小图列表的链接数组 | array | true |
full | 点击放大后的大图的链接数组 | array | true |
title | 点击放大后大图下面要展示的图片说明数组,与图片一一对应 | array | false |
list-ul-class | 默认小图的列表外层ul的自定义class 用于自定义列表的样式,包括ul内部的slot的内容的样式都可以通过这个方式自定义 | string | false |
Scoped Slot
name | 说明 |
---|---|
~ | 列表中的每一个元素中除了默认图以外的内容 |
示例:
<!--在列表中加入右上角删除按钮--> ×
效果展示: