基于Vue的图片浏览img-vuer、vue-picture-preview、vue-preview、swiper和钉钉api

一、img-vuer

一个简单易用的图片浏览组件，支持滑动换图，支持手势缩放，不支持显示当前时第几张和总共多少张

使用说明：

安装 ;

npm install img-vuer --save

使用：

import gallery from 'img-vuer '

Vue.use(gallery)

//多图

效果：

注意：

1.当为单张图片的时候给img标签添加v-gallery属性，当显示一组图片的时候需要给img标签添加v-gallery：group或者v-gallery="group"

2.给img标签添加样式，来控制图片的展示样式。

二、vue-picture-preview (只能实现图片的预览，不能实现图片的放大功能)

安装：npm install --save vue-picture-preview

使用：

首先在项目的入口文件（main.js）中引入, 调用 Vue.use 安装。

在根组件添加 lg-preview 组件的位置 (App.vue)

对于所有图片都可以使用 v-preview 指令来绑定他们的预览功能

效果如下：

点击某一张图片之后

三、vue-preview

一个简单易用的图片浏览组件，支持滑动换图，支持手势缩放，显示当前时第几张和总共多少张

使用说明：

安装 ;

npm i vue-preview -S

main.js

组件中的应用

效果：(如果需要点击某个按钮进来就是第一张图片，可以将第一张图片的话，建议跳转理由吧)

参考文档：https://www.npmjs.com/package/vue-preview/

四：钉钉api是最简单的，也是可以单张加载图片，性能最好的

（1）请在页面引入js文件：

http://g.alicdn.com/dingding/open-develop/1.9.0/dingtalk.js

或者

https://g.alicdn.com/dingding/open-develop/1.9.0/dingtalk.js

（2）调用此api，将显示一个图片浏览器

dd.biz.util.previewImage({

    urls: [String],//图片地址列表

    current: String,//当前显示的图片链接

    onSuccess : function(result) {

        /**/

    },

    onFail : function(err) {}

})

（3）参数说明：

效果

如有疑问可去钉钉官网查看。

五、swipers

安装：npm install swipers

在需要的文件中引入 import Swiper from 'swiper' 

接下来不过说看代码

html部分

js部分（由于数异步实现，所以需要放到延时器中实现）

css部分

最终实现的结果

我觉得以上方式中，swiper是最灵活的，也是最容易修改并添加样式和内容的，建议使用swiper

git地址： https://github.com/wangAlisa/-vue