vue图片点击放大功能
因项目需求(ui框架element-ui),需要实现图片的点击放大,还要能旋转以及上下切换。当时第一反应,element-ui好像没有这样的组件,就想过自己写,但是那个旋转翻页上下切换感觉有点麻烦,不甘心,就在GitHub找找找.........还真找到一个适合vue的插件,叫 viewerjs ,GitHub地址:https://github.com/fengyuanchen/viewerjs 。
说实话,它的功能还是很多很强大的,大家可以自己去看。主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。
1、首先是安装
npm install v-viewer --save
2、安装完引用(还要记得引用它的css样式)
import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
3、vue注册调用
Vue.use(Viewer);
Viewer.setDefaults({
Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});
说明:
| 名称 | 默认值 | 说明 |
|---|---|---|
| inline | false | 启用 inline 模式 |
| button | true | 显示右上角关闭按钮 |
| navbar | true | 显示缩略图导航 |
| title | true | 显示当前图片的标题 |
| toolbar | true | 显示工具栏 |
| tooltip | true | 显示缩放百分比 |
| movable | true | 图片是否可移动 |
| zoomable | true | 图片是否可缩放 |
| rotatable | true | 图片是否可旋转 |
| scalable | true | 图片是否可翻转 |
| transition | true | 使用 CSS3 过度 |
| fullscreen | true | 播放时是否全屏 |
| keyboard | true | 是否支持键盘 |
| url | src | 设置大图片的 url |
4、代码中使用
4.1、图片列表代码:
<div>
<viewer :images="signImages">
<img v-for="src in signImages" :src="src" :key="src" width="50">
</viewer>
</div>
let signImages = [
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg'
]
随便弄了两张图片
放大后效果图:
这样就完成了,但是,点击放大后你会发现下面有很多按钮,需求往往不需要这么多,所以可自行配置 Options 里面的值,但是为了统一,我更倾向于直接修改那些按钮的css,每个按钮有个独立的class,我们可以在自己的css文件中覆盖它的样式
vue图片点击放大功能的更多相关文章
- vue图片点击放大预览
第一种:viewerjs使用介绍(PC.移动端都兼容) 1.先安装依赖 npm install v-viewer --save 2.main.js内引用并注册调用 //main.js import V ...
- js 图片点击放大功能
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ios开发图片点击放大
图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...
- viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer
ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...
- Android中Textview显示Html,图文混排,支持图片点击放大
本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...
- 微信企业号办公系统-图片预览放大功能-previewImage
在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...
- 动画--android图片点击放大动画,并遮挡旁边的控件
http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...
- vue实现图片点击放大
用的vue-cli开发的项目,下面是具体实现代码 子组件: <template> <!-- 过渡动画 --> <transition name="fade&qu ...
- [置顶] ios 网页中图片点击放大效果demo
demo功能:点击网页中的图片,图片放大效果的demo.iphone6.1 测试通过. demo说明:通过webview的委托事件shouldStartLoadWithRequest来实现. demo ...
随机推荐
- 【概率论】5-2:伯努利和二项分布(The Bernoulli and Binomial Distributions)
title: [概率论]5-2:伯努利和二项分布(The Bernoulli and Binomial Distributions) categories: - Mathematic - Probab ...
- Ubuntu16.04 安装 CUDA9.2(总结一些新手容易遇到的问题)
系统:Ubuntu16.04 64bit 显卡:Nvidia GEFORCE 940MX 驱动:NVIDIA-Linux-x86_64-396.18.run 软件:cuda_9.2.88_396.26 ...
- Spring Cloud Gateway(九):网关过滤器 GatewayFilter
本文基于 spring cloud gateway 2.0.1 1.简介 GatewayFilter 网关过滤器用于拦截并链式处理web请求,可以实现横切的与应用无关的需求,比如:安全.访问超时的设置 ...
- 学习OpenCV双目测距原理及常见问题解答
学习OpenCV双目测距原理及常见问题解答 转自博客:https://blog.csdn.net/angle_cal/article/details/50800775 一. 整体思路和问题转化. 图 ...
- Java核心复习——CompletableFuture
介绍 JDK1.8引入CompletableFuture类. 使用方法 public class CompletableFutureTest { private static ExecutorServ ...
- js的基本数据类型
Undefined.Null.Boolean.Number.String.ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )
- File contains parsing errors: file:///etc/yum.repos.d/docker-ce.repo [line 84]: docker-ce-nightly-source]
错误:File contains parsing errors: file:///etc/yum.repos.d/docker-ce.repo [line 84]: docker-ce-n ...
- Map接口和Collection接口的区别
* Map是双列的,Collection是单列的 * Map的键唯一,Collection的子体系Set是唯一的 * Map集合的数据结构值针对键有效,跟值无关;Collection集合的数据结构是针 ...
- UI——DOM
原文链接:Introduction to the DOM Introduction The Document Object Model, usually referred to as the DOM, ...
- 各种修改Mysql字符集
以下方法最好在没有数据时操作,否则有可能导致乱码.如果已有数据,做好备份尝试Mysql迁移由于字符集导致乱码的数据 创建测试环境 mysql> create database test_db; ...