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

简介: 一、img-vuer一个简单易用的图片浏览组件,支持滑动换图,支持手势缩放,不支持显示当前时第几张和总共多少张使用说明:安装 ;npm install img-vuer --save使用:import gallery from 'img-vuer 'Vue.

一、img-vuer

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

使用说明:

安装 ;

npm install img-vuer --save

使用:

import gallery from 'img-vuer '

Vue.use(gallery)

img_5c93470d07ebb79b004755bbe9acfe01.png

//多图

img_0724f70f1b30bf0a79818d8145802310.png

效果:

img_bfe81b4541b558e26074bc95323f79d8.png

注意:

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

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

img_038ccc444d91650db96115a5aa8398d8.png

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

img_0c42234ca25db9412b2e353282bcf70a.png

效果如下:


img_6be019fc37137322909cc17df89e7115.png

点击某一张图片之后

img_d7d3662de69a602a660adaca666f6901.png

三、vue-preview

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

使用说明:

安装 ;

npm i vue-preview -S

main.js

img_91e2425019eaa77bdb9f17b13c52a2a7.png

组件中的应用

img_965a7e8b70bc3e89ea470b23d02ff766.png

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

img_f86e60b81b9878d6572564a15d523a98.png

参考文档: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

效果

img_f13350a1793e82a61dcf540a494f1a6f.png

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

五、swipers

安装:npm install swipers

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

接下来不过说看代码

html部分

img_dafa7ea368c04318117389b748556f00.png

js部分(由于数异步实现,所以需要放到延时器中实现)

img_8e4dadcb8a4e0d2f0c66bed492ffe275.png

css部分

img_d2aae9b9cc9c13a1edd8b374bd4c5022.png

最终实现的结果

img_d3c787bfb6017f736fa3adf4e99e0e51.png

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

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

相关文章
|
6天前
|
JavaScript API
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别
40 0
|
4天前
|
设计模式 JavaScript API
Vue.js的provide/inject API实现了依赖注入
【5月更文挑战第17天】Vue.js的provide/inject API实现了依赖注入,允许父组件向深层子组件传递依赖,降低耦合,提高代码可维护性和测试性。通过provide选项提供依赖,如`provide: {foo: 'foo', bar: this.bar}`,子组件通过inject选项接收,如`inject: ['foo', 'bar']`。适用于跨组件共享数据、插件开发和高阶组件。然而,应谨慎使用以防止过度复杂化代码结构。
13 0
|
5天前
|
JavaScript 架构师 API
Vue 3.x全面升级指南:Composition API深度探索
Vue 3.x 的全面升级引入了 Composition API,这是对 Vue 2.x 传统 Options API 的一个重大改进,它提供了更加灵活和模块化的代码组织方式.
10 0
|
6天前
|
API
钉钉API调试工具使用
钉钉API调试工具使用
29 0
|
6天前
|
API
请问下钉钉有能够获取到群聊天和个人聊天历史记录的api嘛?
DingTalk API 文档中的“消息列表创建”链接似乎已失效:https://developers.dingtalk.com/document/app/message-list-creation. 请注意检查更新或寻找替代资源。
|
6天前
|
JavaScript 前端开发 API
组合API:掌握Vue的组合式API(Composition API)
【4月更文挑战第24天】Vue.js的组合式API是Vue 3中的新特性,旨在提供更灵活的组件逻辑组织方式。它允许开发者像React Hooks一样定义和复用逻辑单元——组合函数。通过组合函数,可以跨组件共享和管理状态,提升代码复用和维护性。本文介绍了如何开始使用组合式API,包括安装Vue CLI、引入API、使用组合函数以及组织和复用逻辑。掌握组合式API能增强开发复杂应用的能力,改善代码结构和可读性。
|
6天前
|
JSON JavaScript API
访问REST API:在Vue中消费和管理远程数据
【4月更文挑战第23天】本文探讨了在Vue应用中高效访问REST API的方法,包括选择合适的API、使用Axios或Fetch发送请求、封装API服务、处理响应和数据、错误管理及性能优化。关键点在于创建服务层封装请求,使用计算属性和方法处理数据,以及实施错误处理和性能提升策略。通过这些最佳实践,开发者能更好地管理和消费远程数据,构建出动态、响应式的Vue应用。
|
6天前
|
JavaScript API
Vue 组合式 API
Vue 组合式 API
|
6天前
|
JavaScript 前端开发 API
如何利用Python的Flask框架与Vue.js创建RESTful API服务
【4月更文挑战第10天】本文介绍了如何使用Flask和Vue.js创建一个前后端分离的RESTful API服务。Flask作为后端框架,负责提供CRUD操作,与SQLite数据库交互;Vue.js作为前端框架,构建用户界面并利用axios库与后端API通信。通过示例代码,展示了Flask设置路由处理用户数据以及Vue组件如何调用API获取和操作数据。此基础结构为构建更复杂的Web应用提供了起点。
|
6天前
|
前端开发 BI API
钉钉多维表目前没有提供具体的API文档供开发者调用
【2月更文挑战第17天】钉钉多维表目前没有提供具体的API文档供开发者调用
59 4