一、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
网友评论