(1)vue点击图片预览(可旋转、翻转、缩放、上下切换、键盘操作)
今天做项目的时候,遇到了新需求,需要把点击图片放大的功能。学习了一下GitHub上的viewerjs插件 GitHub地址:https://github.com/fengyuanchen/viewerjs
1、安装
npm install v-viewer --save-dev
2、在main.js中引入
import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
3、注册调用
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999,
title:false,// 显示当前图片的标题
scalable:false,//图片是否可翻转
rotatable:false,//图片是否可旋转
tooltip:false,//显示缩放百分比
navbar:false,//显示缩略图导航
loop:false,
loading:false }
})
还有很多的功能,可以在GitHub上查看
4、代码中使用
<viewer :images="handImg">
<img v-for="src in handImg" :src="src" :key="src" width="50" height="50px">
</viewer>
let handImg = [
'https://172.0.0.1/0.jpg',
'https://172.0.0.1/2.jpg'
]
5、效果
(1)vue点击图片预览(可旋转、翻转、缩放、上下切换、键盘操作)的更多相关文章
- Vue PC端图片预览插件
*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...
- vue项目中图片预览旋转功能
最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...
- 微信小程序点击图片预览-wx.previewImage
<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- 微信小程序-点击图片预览
拿接口 有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数
- vue.js 图片预览
Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...
- Wx-小程序-图片预览、保存
点击图片预览 长按图片保存 点击按钮保存到手机相册 view: <!--wxml--> <text>点击图片预览.长按保存图片.点击按钮保存到系统相册</text> ...
- vue图片点击放大预览
第一种:viewerjs使用介绍(PC.移动端都兼容) 1.先安装依赖 npm install v-viewer --save 2.main.js内引用并注册调用 //main.js import V ...
- 在 vue 中使用 vieiwer 图片预览插件
https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
随机推荐
- C#发送内置图片的html格式邮件的代码
将写内容过程经常用的内容段备份一次,下面的内容是关于C#发送内置图片的html格式邮件的内容,应该对码农们也有用处.MailMessage m = new MailMessage();m.Subjec ...
- 如何在Idea提交代码到Github上
一,配置账户 1. Setting >> Version Control >> git,配置git的安装目录(一般默认识别),其他参数不变 2.配置GitHub账户,输入Git ...
- JS中if判断 非空即为真 非0即为真
1.字符串参与判断时:非空即为真判断字符串为空的方法if(str!=null && str!=undefined && str !='')可简写为if(!str){ ...
- 第十三节 Ajax基础
什么是服务器:简单地,可以说服务器就是一个内存超大的计算机,可以存放很多数据和文件(当然,如果不需要太多的数据存储量,我们也可以用电脑.手机等一系列小型计算机作为服务器,只不过性能的差别而已) 网页浏 ...
- phpstrom 快速定位到当前编辑文件
方法1(手动定位): 打开所要查找的文件,然后点击上图中红框中的按钮即可快速定位. 方法二(自动定位): Project面板右上角有个准星类的图标,点击后勾选上Autoscorll from Sour ...
- Java7/8 中的 HashMap 和 ConcurrentHashMap 全解析
Java7/8 中的 HashMap 和 ConcurrentHashMap 全解析 今天发一篇”水文”,可能很多读者都会表示不理解,不过我想把它作为并发序列文章中不可缺少的一块来介绍.本来以为花不了 ...
- opencv检错:程序运行过程正常,当跳出函数时出现断言错误(Debug Assertion Failed)
转载http://blog.csdn.net/u012327581/article/details/51351780 1.问题描述 在VS2015下配置好Opencv后,程序在函数运行过程中正常,调试 ...
- autoit脚本-从基本的函数用法开始
适配浏览器:目前了解的有ie浏览器 MsgBox 显示可选提示超时的消息框 _ArrayDisplay _arraydisplay($aArray) ;$aArra一般为数组,方法用于展示表格展示数 ...
- 工作流Activiti入门教程
https://blog.csdn.net/chenweifu365/article/details/79032758/
- mysql中data和datatime的区别
1.显示格式的区别 Date显示格式:YYYY-MM-DD:DateTime显示格式:YYYY-MM-DD HH:mm:ss. 2.显示范围的区别 Date显示范围是1601-01-01 到 9999 ...