Vue 使用 Viewers 实现图片的 放大缩小、 旋转 、 拖拉等操作、支持多图片
目录
方式一 element ui自己搞了一个 这种
方式二 使用插件
方式一 element ui自己搞了一个 这种
方式二 使用插件
先看效果图吧,这是单张图片的。放大缩小支持鼠标滚轴操作。
具体的操作
首先Vue需要安装插件
npm install v-viewer --save 或者 cnpm install v-viewer --save
(最好使用cnpm 淘宝镜像,npm不可以的话就试试cnpm)
安装成功的话 ,你的package.json 文件里面会 有"v-viewer": "^1.2.1",
然后是使用
这里就是全部代码了
<template><section><div> <el-row style="text-align: center;" ><viewer :images="signImages" style="z-index:0;"><img :src="img" :key="src" width="500"></viewer></el-row><el-row style="text-align: center;"><el-button>打印</el-button></el-row></div></section>
</template>
<script>import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'export default {data() {return {img:""}},methods: {},mounted() {//这里指明图片this.img = localStorage.getItem("img")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" }});
}
}
</script>
<style scoped></style>
想要实现多张图片
的这种左右选择的方式,就将图片循环放到<viewer></viewer>插件里
<viewer :images="signImages" style="z-index:0;"><img v-for="img in images" :src="img" :key="src" width="500">
</viewer>
大体就是这么个方式了。
下面是他的一些默认配置
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
inline | 布尔值 | false | 启用 inline 模式 |
button | 布尔值 | true | 显示右上角关闭按钮(jQuery 版本无效) |
navbar | 布尔值/整型 | true | 显示缩略图导航 |
title | 布尔值/整型 | true | 显示当前图片的标题(现实 alt 属性及图片尺寸) |
toolbar | 布尔值/整型 | true | 显示工具栏 |
tooltip | 布尔值 | true | 显示缩放百分比 |
movable | 布尔值 | true | 图片是否可移动 |
zoomable | 布尔值 | true | 图片是否可缩放 |
rotatable | 布尔值 | true | 图片是否可旋转 |
scalable | 布尔值 | true | 图片是否可翻转 |
transition | 布尔值 | true | 使用 CSS3 过度 |
fullscreen | 布尔值 | true | 播放时是否全屏 |
keyboard | 布尔值 | true | 是否支持键盘 |
interval | 整型 | 5000 | 播放间隔,单位为毫秒 |
zoomRatio | 浮点型 | 0.1 | 鼠标滚动时的缩放比例 |
minZoomRatio | 浮点型 | 0.01 | 最小缩放比例 |
maxZoomRatio | 数字 | 100 | 最大缩放比例 |
zIndex | 数字 | 2015 | 设置图片查看器 modal 模式时的 z-index |
zIndexInline | 数字 | 0 | 设置图片查看器 inline 模式时的 z-index |
url | 字符串/函数 | src | 设置大图片的 url |
build | 函数 | null | 回调函数,具体查看演示 |
built | 函数 | null | 回调函数,具体查看演示 |
show | 函数 | null | 回调函数,具体查看演示 |
shown | 函数 | null | 回调函数,具体查看演示 |
hide | 函数 | null | 回调函数,具体查看演示 |
hidden | 函数 | null | 回调函数,具体查看演示 |
view | 函数 | null | 回调函数,具体查看演示 |
viewed | 函数 | null | 回调函数,具体查看演示 |
Vue 使用 Viewers 实现图片的 放大缩小、 旋转 、 拖拉等操作、支持多图片相关推荐
- 图片 滚动 放大缩小 旋转
需求就是页面浏览一张图片,要求提供放大.缩小.旋转的功能 这里实现的方式是使用jquery的一个iviewer插件 具体实现方式已经提供在下载包中,下载链接:http://download.csdn. ...
- element-ui+js+vue——实现图片的放大缩小拖动等功能——技能提升
elementui+js+vue--实现图片组件的封装 1. 实现图片的放大缩小 2. 实现图片的拖动功能 3. 实现图片的预览 最近同事在写一个关于 图片放大缩小拖动的功能,其实不止是图片,只要是在 ...
- Vue+Openlayers显示TileWMS时不显示默认控件放大缩小旋转等组件
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_霸道流氓气质的博客-CSDN博客 在上面 ...
- iOS 仿淘宝实现商品规格图片的放大缩小功能
刚好最近在做个商城项目,甲方爸爸说咱们要求不高,你就照着淘宝来就好,额~~~~ 好吧,咱就不吐槽了,直接开撸吧,惯例先上一下效果图 需求以及思路 我们要实现的功能有如下几个: 图片的全屏查看以及保存 ...
- 图片放大缩小旋转左移右移镜像倒影android
图片放大缩小旋转左移右移镜像倒影 demo: TestImage 1. 将 meinv.jpg 图片拷贝到以下目录TestImage\app\src\main\res\mipmap-hdpi 1.An ...
- html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小 最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...
- C语言实现BMP图片的放大缩小
C语言实现BMP图片的放大缩小 BMP图片简介:BMP图片是windows操作系统中的标准图像文件格式,可以分为两类:设备相关位图(DDB)和设备无关位图(DIB),使用广泛.它采用位映射存储格式,除 ...
- 鼠标移动到图片上实现图片的放大缩小
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="图片放大缩小.aspx.cs ...
- Axure9图片拖动放大缩小
Axure9 图片拖动放大缩小 1.设置两个文本域,分别放置图片的宽与高 2.图片的交互设置 3.效果 当去请教一个会的人会的东西,因为他会,会很爽快的说不会可以问我呀,但是当问到不会的东西时,就会说 ...
- C语言实现图片的放大缩小(附完整源码)
C语言实现图片的放大缩小 #include<stdio.h> #include<stdlib.h> #include<string.h> typedef unsig ...
最新文章
- python turtle画画 30排以内_Python竟能画这么漂亮的花,帅呆了(代码分享)
- 洛奇6里很喜欢的一段话!洛奇6经典台词!而是你能挨多重,并且坚持向前,你能承受多少并且坚持向前,这样才叫胜利!
- Linux Shell Tips小技巧
- c++经典书籍--提高C++性能的编程技术
- Java-Java反射
- 线上报名 | 高性能深度学习推理引擎 TensorRT 实战编程讲解
- python生成奇数列表_python3:列出一个不需要迭代的奇数列表
- mysql主从 dump线程_MySQL主从复制线程状态转变
- python中seek(10、1)_Python中index()和seek()的用法(详解)
- 2018 最强“弱密码”排行榜新鲜出炉,123456 再登首
- 屏幕共享技术及相关软件使用测评
- java编译的类包含美元符号 $
- Doris ODBC外表使用
- 旭日X3派,从零到TogetherRos的快速体验
- 权限控制 JSR-250注解、@Secured注解、支持表达式的注解
- HBuilder uniapp 真机测试打包测试
- aspen压缩因子_ASPEN PLUS的物性数据库及其应用.pdf
- 亚洲及中国全国境内雷电闪电数据采集程序服务部署+接口调用说明
- JSP 手机销售管理系统 myeclipse开发web网页 mysql数据库
- Haskell:理解Haskell中的CPS(Cont)