(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地址 ...
随机推荐
- vim基本命令总结
编辑模式下i 从光标所在位置前开始插入文本I 将光标移动到当前行行首,然后在其前插入文本a 用于在光标当前所在位置之后追加新文本A 将光标移动到所在行行尾,在那里插入新文本o 在光标所在行的下面新开一 ...
- 五一培训 DAY1
DAY1 枚举 例题1 题解: 例题2 题解: 例题3 题解: vis[ ]判断是否为素数,pri[ ]储存素数 例题4 题解: 例题5 题解: PS: i < 1<<n ...
- 第十二节 JS事件高级应用
事件绑定: IE方式:(仅适用于IE9及以下,其他的比如FF.Chrome.IE11都不适用) attachEvent(事件名称, 函数):绑定事件处理函数 detachEvent(事件名称, 函数) ...
- 用phantomjs进行web界面自动化测试的几个注意点
貌似我以前说过不少界面自动化测试的坏话,哈哈.最近接触了phantomjs,发现用它进行web界面测试也挺有意思的,下面举几个我使用过程中发现的注意点. 1.需要指定phantomjs位置,否则使用时 ...
- \r \n \t \n\t
[root@localhost advanced_shell_script]# cat test15.sh #!/bin/bash #!/bin/bash # echo -e# 默认情况下,echo命 ...
- radhat6.6上安装oracle12c RAC (二)
二.GI(Grid Infrastructure)安装 首先将安装包传到node1的目录 2.1 GI软件安装 2.1.1.解压安装包 #su - grid解压 GRID 到 GRID用户的$ORAC ...
- 原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
- 一键git push脚本(python版)
#!/usr/bin/env python import os import subprocess import sys import time gitconfig = { 'cwd': './blo ...
- git commit -m 提交的内容换行
网上说只需要通过单引号来换行,一直没理解,后面终于试出来了.总结一句话就是. . 先输入第一个引号,按Enter即可换行,完成后再补齐后面的引号 // 步骤一: 输入第一行 git commit -m ...
- http协议详解及htt面试题目,常见的http状态码
http协议详解及htt面试题目,常见的http状态码 HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. HTTP ...