本篇文章给大家带来的内容是关于vue图片预览插件如何创建（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
vue-image-swipe
基于photoswipe实现的vue图片预览组件
安装
1 第一步
npm instatll vue-image-swipe -D
2 第二步
vue 入口文件引入
立即学习“前端免费学习笔记（深入）”；
import Vue from 'vue' import VueImageSwipe from 'vue-image-swipe' import 'vue-image-swipe/dist/vue-image-swipe.css' Vue.use(VueImageSwipe)
使用
hello world
- @@##@@
methods
只暴露了一个方法this.$imagePreview，并绑定到vue的原型上
使用
this.$imagePreview(options = {})options有三个参数
mallcloud商城
下载
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
| 参数 | 默认值 | 说明 |
|---|---|---|
| images | 空数组 | 图片的url数组 |
| index | 0 | 预览图片的索引值, 默认是0 |
| defaultOpt | {} | 配置项 |
defaultOpt 的配置项请参考photoswipe配置项，
注意：不能保证所有配置项都是可用的
列举一些常用的配置
defaultOpt: {
fullscreenEl: true,
shareEl: false,
arrowEl: true,
preloaderEl: true,
loop: false,
bgOpacity: 0.85,
showHideOpacity: true,
errorMsg: '图片加载失败
',
}相关推荐：
