实现一个vue的图片预览插件
vue-image-swipe
基于photoswipe实现的vue图片预览组件
安装
1 第一步
npm install 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)
使用
<template>
<div>
hello world
<div>
<ul>
<li
:key="index"
@click="preview(index)"
v-for="(l, index) in images">
<img :src="l" alt="">
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
images: [
'http://oayhezji6.bkt.clouddn.com/preview1.jpg',
'http://oayhezji6.bkt.clouddn.com/preview2.jpg',
'http://oayhezji6.bkt.clouddn.com/preview3.jpg',
'http://oayhezji6.bkt.clouddn.com/preview9.jpg',
'http://oayhezji6.bkt.clouddn.com/preview10.jpg',
'http://oayhezji6.bkt.clouddn.com/preview6.jpg'
]
}
},
created() {
},
methods: {
preview(index) {
this.$imagePreview({
images: this.images,
index: index,
})
}
}
}
</script>
methods
只暴露了一个方法this.$imagePreview,并绑定到vue的原型上
使用
this.$imagePreview(options = {})
options有三个参数
参数 | 默认值 | 说明 |
---|---|---|
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: '<div class="pswp__error-msg">图片加载失败</div>',
}
demo
来源:https://segmentfault.com/a/1190000016409430
实现一个vue的图片预览插件的更多相关文章
- Vue.js图片预览插件
vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...
- 适用于移动端、PC 端 Vue.js 图片预览插件
1.安装:npm install --save vue-picture-preview 2.使用: (1)入口文件中main.js中全局引入: import Vue from 'vue' import ...
- Vue PC端图片预览插件
*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...
- 【VUE】图片预览放大缩小插件
From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...
- js图片预览插件,不涉及上传
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
- eclipse 图片预览插件
eclipse 图片预览插件 CreateTime--2018年4月22日22:59:55 Author:Marydon 下载地址:eclipse 图片预览插件 将插件文件夹直接拷贝到eclips ...
- 在 vue 中使用 vieiwer 图片预览插件
https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
- vue-preview vue图片预览插件+缩略图样式
一.安装 npm i vue-preview -S 二.main.js中 导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...
- vue.js 图片预览
Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...
随机推荐
- 记录下sparkStream的做法(scala)
一直用storm做实时流的开发,之前系统学过spark但是一直没做个模版出来用,国庆节有时间准备做个sparkStream的模板用来防止以后公司要用.(功能模拟华为日常需求,db入库hadoop环境) ...
- HBase Ambari
- Find- Linux必学的60个命令
1.作用 find命令的作用是在目录中搜索文件,它的使用权限是所有用户. 2.格式 find [path][options][expression] path指定目录路径,系统从这里开始沿着目录树向下 ...
- tcpdump 抓包
简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...
- Spring MVC 返回 xml json pdf 数据的配置方法
<!-- Spring MVC 返回 xml 数据的配置方法 --> <bean class="org.springframework.web.servlet.vi ...
- windows 常用的快捷键
记录一些 windows 常用快捷键,待更新 Ctrl系列 快捷键 功能 Ctrl + C 复制 Ctrl + INSERT 复制 Ctrl + V 粘贴 Ctrl + Z 撤销 Ctrl + D 删 ...
- MySQL系列(十一)--外键约束foreign key的基本使用
有些时候,为了保证数据的完整性,我们会选择的使用外键约束,例如教师对应的表和课程表中老师的id,这种时候就要使用外键约束了. PS:这里不考虑表结构设计,三范式与反范式等设计问题,基于MySQL8.0 ...
- 【codeforces 508D】Tanya and Password
[题目链接]:http://codeforces.com/problemset/problem/508/D [题意] 给你一个字符的所有连续3个的子串; 让你复原出原串; (包含小写.大写字母以及数字 ...
- jQuery3动画+创建元素
一.jQuery的动画 1.jQuery自带的动画 1>变化的是width height opacity display <!DOCTYPE html> <html lang= ...
- leyou_01_自定义异常处理器
1.自定义异常处理器,当程序发生异常时可以我们可以自己定义返回的,状态码和状态信息 2.当异常发生时调用我们的自定义异常 @RestController @RequestMapping("i ...