基于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

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容