一、img-vuer
一个简单易用的图片浏览组件,支持滑动换图,支持手势缩放,不支持显示当前时第几张和总共多少张
使用说明:
安装 ;
npm install img-vuer --save
使用:
import gallery from 'img-vuer '
Vue.use(gallery)
![img_5c93470d07ebb79b004755bbe9acfe01.png](https://yqfile.alicdn.com/img_5c93470d07ebb79b004755bbe9acfe01.png?x-oss-process=image/resize,w_1400/format,webp)
//多图
![img_0724f70f1b30bf0a79818d8145802310.png](https://yqfile.alicdn.com/img_0724f70f1b30bf0a79818d8145802310.png?x-oss-process=image/resize,w_1400/format,webp)
效果:
![img_bfe81b4541b558e26074bc95323f79d8.png](https://yqfile.alicdn.com/img_bfe81b4541b558e26074bc95323f79d8.png?x-oss-process=image/resize,w_1400/format,webp)
注意:
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 安装。
![img_7eccbb3c1c916c5b245a33f6fb30d087.png](https://yqfile.alicdn.com/img_7eccbb3c1c916c5b245a33f6fb30d087.png?x-oss-process=image/resize,w_1400/format,webp)
在根组件添加 lg-preview 组件的位置 (App.vue)
![img_038ccc444d91650db96115a5aa8398d8.png](https://yqfile.alicdn.com/img_038ccc444d91650db96115a5aa8398d8.png?x-oss-process=image/resize,w_1400/format,webp)
对于所有图片都可以使用 v-preview 指令来绑定他们的预览功能
![img_0c42234ca25db9412b2e353282bcf70a.png](https://yqfile.alicdn.com/img_0c42234ca25db9412b2e353282bcf70a.png?x-oss-process=image/resize,w_1400/format,webp)
效果如下:
![img_6be019fc37137322909cc17df89e7115.png](https://yqfile.alicdn.com/img_6be019fc37137322909cc17df89e7115.png?x-oss-process=image/resize,w_1400/format,webp)
点击某一张图片之后
![img_d7d3662de69a602a660adaca666f6901.png](https://yqfile.alicdn.com/img_d7d3662de69a602a660adaca666f6901.png?x-oss-process=image/resize,w_1400/format,webp)
三、vue-preview
一个简单易用的图片浏览组件,支持滑动换图,支持手势缩放,显示当前时第几张和总共多少张
使用说明:
安装 ;
npm i vue-preview -S
main.js
![img_91e2425019eaa77bdb9f17b13c52a2a7.png](https://yqfile.alicdn.com/img_91e2425019eaa77bdb9f17b13c52a2a7.png?x-oss-process=image/resize,w_1400/format,webp)
组件中的应用
![img_965a7e8b70bc3e89ea470b23d02ff766.png](https://yqfile.alicdn.com/img_965a7e8b70bc3e89ea470b23d02ff766.png?x-oss-process=image/resize,w_1400/format,webp)
效果:(如果需要点击某个按钮进来就是第一张图片,可以将第一张图片的话,建议跳转理由吧)
![img_f86e60b81b9878d6572564a15d523a98.png](https://yqfile.alicdn.com/img_f86e60b81b9878d6572564a15d523a98.png?x-oss-process=image/resize,w_1400/format,webp)
参考文档: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)参数说明:
![img_55c262c3a8aaae2cf1f044bf575be385.png](https://yqfile.alicdn.com/img_55c262c3a8aaae2cf1f044bf575be385.png?x-oss-process=image/resize,w_1400/format,webp)
效果
![img_f13350a1793e82a61dcf540a494f1a6f.png](https://yqfile.alicdn.com/img_f13350a1793e82a61dcf540a494f1a6f.png?x-oss-process=image/resize,w_1400/format,webp)
如有疑问可去钉钉官网查看。
五、swipers
安装:npm install swipers
在需要的文件中引入 import Swiper from 'swiper'
接下来不过说看代码
html部分
![img_dafa7ea368c04318117389b748556f00.png](https://yqfile.alicdn.com/img_dafa7ea368c04318117389b748556f00.png?x-oss-process=image/resize,w_1400/format,webp)
js部分(由于数异步实现,所以需要放到延时器中实现)
![img_8e4dadcb8a4e0d2f0c66bed492ffe275.png](https://yqfile.alicdn.com/img_8e4dadcb8a4e0d2f0c66bed492ffe275.png?x-oss-process=image/resize,w_1400/format,webp)
css部分
![img_d2aae9b9cc9c13a1edd8b374bd4c5022.png](https://yqfile.alicdn.com/img_d2aae9b9cc9c13a1edd8b374bd4c5022.png?x-oss-process=image/resize,w_1400/format,webp)
最终实现的结果
![img_d3c787bfb6017f736fa3adf4e99e0e51.png](https://yqfile.alicdn.com/img_d3c787bfb6017f736fa3adf4e99e0e51.png?x-oss-process=image/resize,w_1400/format,webp)
我觉得以上方式中,swiper是最灵活的,也是最容易修改并添加样式和内容的,建议使用swiper