779f715b769742caf40779644216407c.png

vue2-viewer

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

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

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

使用文档

安装

npm 

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

import 

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

使用组件

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

单图片模式

props

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

示例:

<

效果展示:

23406ac0049b102147fb6b4507be877d.gif

多图片模式

props

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

Scoped Slot

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

示例:

<

效果展示:

30647c6462f45cf8834208554995f7f4.gif
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐