因项目需求(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. word 实现多级列表编号

  2. 配置centos7阿里镜像源和epel源

    [root@runstone yum.repos.d]# pwd /etc/yum.repos.d [root@runstone yum.repos.d]# cat aliBase.repo #镜像源 ...

  3. NOIP提高组历年真题题解

    2018 铺设道路 差分水题,推一下结论就好了. #include<cstdio> #include<algorithm> using namespace std; ],d[] ...

  4. sql server 发布订阅

    [配置] 一. 发布方 复制 >> 如果有问题 C:\Windows\System32\drivers\etc hosts: 127.0.0.1 ?? 二. 订阅方 订阅方设置结束 三. ...

  5. GC和GC分配策略

    一.内存如何回收 解决如何回收问题,首先需要解决回收对象的问题?什么样的对象需要回收,怎么样的不需要回收?保证有引用的内存不被释放:回收没有指针引用的内存是Collector的职责,在保证没有指针引用 ...

  6. OpenTK学习笔记(2)-工作窗口的三种方法创建方法(winfrom下类的形式创建)

    参考资料: https://www.codeproject.com/Articles/1167212/OpenGL-with-OpenTK-in-Csharp-Part-Initialize-the- ...

  7. redis启动、关闭脚本

    #!/bin/bash PORT= NAME=redis-server ID=`ps -ef | grep "$NAME" | grep -v "grep" | ...

  8. SQL-W3School-函数:SQL FIRST() 函数

    ylbtech-SQL-W3School-函数:SQL FIRST() 函数 1.返回顶部 1. FIRST() 函数 FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER ...

  9. Leetcode: Sum of Two Integers && Summary: Bit Manipulation

    Calculate the sum of two integers a and b, but you are not allowed to use the operator + and -. Exam ...

  10. 使用redis-py的两个类Redis和StrictRedis时遇到的坑

    使用redis-py的两个类Redis和StrictRedis时遇到的坑 前言: 今天产品经理说,有几个队列排序的功能不能用了.对比了下以前的代码查到了一个原因,这个比较的坑,总结起来也是自己没好好看 ...