因项目需求(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图片点击放大功能的更多相关文章

  1. vue图片点击放大预览

    第一种:viewerjs使用介绍(PC.移动端都兼容) 1.先安装依赖 npm install v-viewer --save 2.main.js内引用并注册调用 //main.js import V ...

  2. js 图片点击放大功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ios开发图片点击放大

    图片点击放大,再次点击返回原视图.完美封装,一个类一句代码即可调用.IOS完美实现 创建了一个专门用于放大图片的类,以下为.h文件 #import <Foundation/Foundation. ...

  4. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer

    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...

  5. Android中Textview显示Html,图文混排,支持图片点击放大

    本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...

  6. 微信企业号办公系统-图片预览放大功能-previewImage

    在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...

  7. 动画--android图片点击放大动画,并遮挡旁边的控件

    http://blog.csdn.net/s13488941815/article/details/40649823: 首先是点击放大可以使用android自带的缩放动画,因为要遮盖其他控件,就需要控 ...

  8. vue实现图片点击放大

    用的vue-cli开发的项目,下面是具体实现代码 子组件: <template> <!-- 过渡动画 --> <transition name="fade&qu ...

  9. [置顶] ios 网页中图片点击放大效果demo

    demo功能:点击网页中的图片,图片放大效果的demo.iphone6.1 测试通过. demo说明:通过webview的委托事件shouldStartLoadWithRequest来实现. demo ...

随机推荐

  1. 【概率论】5-2:伯努利和二项分布(The Bernoulli and Binomial Distributions)

    title: [概率论]5-2:伯努利和二项分布(The Bernoulli and Binomial Distributions) categories: - Mathematic - Probab ...

  2. Ubuntu16.04 安装 CUDA9.2(总结一些新手容易遇到的问题)

    系统:Ubuntu16.04 64bit 显卡:Nvidia GEFORCE 940MX 驱动:NVIDIA-Linux-x86_64-396.18.run 软件:cuda_9.2.88_396.26 ...

  3. Spring Cloud Gateway(九):网关过滤器 GatewayFilter

    本文基于 spring cloud gateway 2.0.1 1.简介 GatewayFilter 网关过滤器用于拦截并链式处理web请求,可以实现横切的与应用无关的需求,比如:安全.访问超时的设置 ...

  4. 学习OpenCV双目测距原理及常见问题解答

    学习OpenCV双目测距原理及常见问题解答 转自博客:https://blog.csdn.net/angle_cal/article/details/50800775 一. 整体思路和问题转化.  图 ...

  5. Java核心复习——CompletableFuture

    介绍 JDK1.8引入CompletableFuture类. 使用方法 public class CompletableFutureTest { private static ExecutorServ ...

  6. js的基本数据类型

    Undefined.Null.Boolean.Number.String.ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )

  7. 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 ...

  8. Map接口和Collection接口的区别

    * Map是双列的,Collection是单列的 * Map的键唯一,Collection的子体系Set是唯一的 * Map集合的数据结构值针对键有效,跟值无关;Collection集合的数据结构是针 ...

  9. UI——DOM

    原文链接:Introduction to the DOM Introduction The Document Object Model, usually referred to as the DOM, ...

  10. 各种修改Mysql字符集

    以下方法最好在没有数据时操作,否则有可能导致乱码.如果已有数据,做好备份尝试Mysql迁移由于字符集导致乱码的数据 创建测试环境 mysql> create database test_db; ...