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 ...
随机推荐
- word 实现多级列表编号
- 配置centos7阿里镜像源和epel源
[root@runstone yum.repos.d]# pwd /etc/yum.repos.d [root@runstone yum.repos.d]# cat aliBase.repo #镜像源 ...
- NOIP提高组历年真题题解
2018 铺设道路 差分水题,推一下结论就好了. #include<cstdio> #include<algorithm> using namespace std; ],d[] ...
- sql server 发布订阅
[配置] 一. 发布方 复制 >> 如果有问题 C:\Windows\System32\drivers\etc hosts: 127.0.0.1 ?? 二. 订阅方 订阅方设置结束 三. ...
- GC和GC分配策略
一.内存如何回收 解决如何回收问题,首先需要解决回收对象的问题?什么样的对象需要回收,怎么样的不需要回收?保证有引用的内存不被释放:回收没有指针引用的内存是Collector的职责,在保证没有指针引用 ...
- OpenTK学习笔记(2)-工作窗口的三种方法创建方法(winfrom下类的形式创建)
参考资料: https://www.codeproject.com/Articles/1167212/OpenGL-with-OpenTK-in-Csharp-Part-Initialize-the- ...
- redis启动、关闭脚本
#!/bin/bash PORT= NAME=redis-server ID=`ps -ef | grep "$NAME" | grep -v "grep" | ...
- SQL-W3School-函数:SQL FIRST() 函数
ylbtech-SQL-W3School-函数:SQL FIRST() 函数 1.返回顶部 1. FIRST() 函数 FIRST() 函数返回指定的字段中第一个记录的值. 提示:可使用 ORDER ...
- 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 ...
- 使用redis-py的两个类Redis和StrictRedis时遇到的坑
使用redis-py的两个类Redis和StrictRedis时遇到的坑 前言: 今天产品经理说,有几个队列排序的功能不能用了.对比了下以前的代码查到了一个原因,这个比较的坑,总结起来也是自己没好好看 ...