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

相关文章
|
29天前
|
JavaScript API
vue中api统一管理
【10月更文挑战第4天】
|
3月前
|
前端开发 JavaScript 安全
入门Vue+.NET 8 Web Api记录(一)
入门Vue+.NET 8 Web Api记录(一)
135 4
|
28天前
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
2月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
34 4
|
3月前
|
JavaScript 前端开发 API
Vue.js 3.x新纪元:Composition API引领潮流,Options API何去何从?前端开发者必看的抉择指南!
【8月更文挑战第30天】Vue.js 3.x 引入了 Composition API,为开发者提供了更多灵活性和控制力。本文通过示例代码对比 Composition API 与传统 Options API 的差异,帮助理解两者在逻辑复用、代码组织、类型推断及性能优化方面的不同,并指导在不同场景下的选择。Composition API 改善了代码可读性和维护性,尤其在大型项目中优势明显,同时结合 TypeScript 提供更好的类型推断和代码提示,减少错误并提升开发效率。尽管如此,在选择 API 时仍需考虑项目复杂性、团队熟悉度等因素。
51 0
|
3月前
|
JavaScript 前端开发 测试技术
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
[译] 用 Vue.js 3 Composition API 创建 i18n 插件
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
|
4月前
|
存储 开发框架 前端开发
循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用
循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用
|
4月前
|
存储 应用服务中间件 API
创建一个随机图片API
通过web服务器(如Apache、Nginx等)访问该文件以获取随机图片。请确保将images数组中的图片路径替换为您自己的图片路径。您还可以扩展该数组,添加更多图片作为可选内容
125 5
|
3月前
|
开发框架 JavaScript .NET
Vue与ASP.NET Core Web Api设置localhost与本地ip地址皆可访问
Vue与ASP.NET Core Web Api设置localhost与本地ip地址皆可访问
39 0