实现一个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
demo
查看源码
实现一个vue的图片预览插件相关推荐
- dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件(巨详细)
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
- pc 图片预览放大 端vue_安利一款简单好用的Vue图片预览插件
在项目中因为要经常用到图片预览效果,自己写的话麻烦死啦(懒) vue-photo-preview 一个基于 photoswipe 的 vue 图片预览插件,支持移动端和PC端,支持各种手势操作,放大缩 ...
- vue3 开发一个图片预览插件
vue3 的插件开发和vue2思路类似但是写法却迥异.主要变化在vue3没有了extend构造器. 这次我们通过一个图片预览插件,贯通整个vue3插件开发的过程. 1 在src下新建lplugins文 ...
- 【VUE】图片预览放大缩小插件(推荐阅读)
From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...
- 移动端图片预览插件-fly-zomm-img.min.js
移动端图片预览插件,一个JQ的插件,支持手势放大缩小:有点小bug,不过感觉是可以接受的: 插件的地址:http://www.jq22.com/jquery-info15466 那里有具体的说明,但是 ...
- html页面点击图片名称查看图片------图片预览插件viewer.js使用
前言 在做项目时,会遇到在前台展示附件详情,比如图片,word,pdf等.viewer.js 图片查看器,用来查看页面中的图片. 基本效果: Viewer.js的使用 这是一个github工程,功能很 ...
- Vue实现图片预览(Viewer.js)
Viewer.js viewer.js是一款开源的图片预览插件,功能十分强大: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持 ...
- React 图片预览插件 rc-viewer @hanyk/rc-viewer
最近一个需求是图片要实现预览并且可以上下切换,react接触不是很久,查了好多资料,最终对@hanyk/rc-viewer下手,jquery用多了伙伴都知道viewer.js,一个很强大的图片预览插件 ...
- VSCode图片预览插件 Image preview
VSCode前端开发图片预览插件 Image preview(支持css预览 支持svg格式) 一款提高前端开发效率的插件 ,代码中hover直接预览图片 先上效果图 不仅html中可以预览 js代码 ...
最新文章
- python pandas inplace用法
- 有助于项目管理(PM)指导思想
- y460安装的ubuntu开机时笔记本键盘失效的问题
- [转]订制CentOS自安装光盘
- 如何判断程序猿在做什么
- delphi 登录界面 主窗体 切换_.NET CORE(C#) WPF 方便的实现用户控件切换(祝大家新年快乐)
- 伪装Apache版本防止入侵Web服务器
- 完全二叉树/ 满二叉树/二叉树遍历(前序、中序、后序、层序遍历)
- 无法从“cstring”转换为“lpcstr”_别用Sketchup一个个转模型的版本了,用这些批量转换器真香…...
- Excel:用VBA添加分页符
- java创建临时文件夹_Java 创建文件、文件夹以及临时文件
- 新浪微博发布文章html,JS实现仿新浪微博发布内容为空时提示功能代码
- PLC实验:定时器/计数器功能实验
- ZCS证书的重新签发
- 无向简单图怎么判断_无向图基础
- Spring Security和 JWT两大利器来打造一个简易的权限系统。
- Golang学习日志 ━━ gin-vue-admin实现多数据库db-list
- 树莓派水星USB无线网卡MW150US配置
- 倍福PLC Modbus通信区
- VDO-SLAM: A Visual Dynamic Object-aware SLAM System论文笔记
热门文章
- jstl java_JSTL-Java-Baby-51CTO博客
- python一年365天、初始水平值_2020年11月7日,20201107
- java并发实战编程pdf_「原创」Java并发编程系列25 | 交换器Exchanger
- 计算机数学基础 课程定位图形,本科《计算机数学基础》(上)课程教学设计方案.doc...
- optparse接受带空格的参数值时,需要加双引号
- scala与python混合调用实验
- 将Python源码编译成pyc和pyo文件
- 打印表格_表格怎么打印出来
- java str2date,java date类与string类实例代码分享
- Python 十六进制转Base64_python基础day03笔记