一、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