html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图

前提

安装插件

npm install vue-directive-image-previewer -D

引入插件

import VueDirectiveImagePreviewer from ‘vue-directive-image-previewer‘

import ‘vue-directive-image-previewer/dist/assets/style.css‘

Vue.use(VueDirectiveImagePreviewer)

使用

了解配置

然后就是根据自己需求配置你想要的的效果了，我去看了下官方文档，挫劣地翻译了一下：

Vue.use(VueDirectiveImagePreviewer, {

//1. wrapper背景颜色———— 你也可以写成background: ‘#000‘ //支持rgba、rgb和image: ‘url(xxx)‘

background: {

color: ‘#000‘

//2. 转换动画

animate: {

duration: 600,

delay: 500

//3. 鼠标样式(css)

cursor: ‘pointer‘,

})

其他options

copy：true——布尔类型，默认为true。如果是true，那么当你预览图片时，被点击的原始的图片不会消失；如果是false，被点击的原始的图片就会消失

zIndex:1——Number类型，默认为1。

maxWidth:1000|"1000px"|"100%"——Number类型，限制图片最大宽度

maxHeight:1000|"1000px"|"100%"——Number类型，限制图片最大高度

previewSize:2|20%——Number类型，预览图片的大小。举例，如果值为2，那么预览图片的宽高就是原始图片大小的两倍

如何实现全屏预览

//先获取客户端显示屏幕屏幕的宽高

var height=screen.height

var width=screen.width

//previewSize可以设置大一点，之后预览的图片就可以无限放大，直到宽或高达到了限制的最大宽高,即屏幕宽高。它不会压缩拉伸图片的原本比例。

Vue.use(VueDirectiveImagePreviewer,{

previewSize:10,

maxWidth:width,

maxHeight:height

})

原文：https://www.cnblogs.com/sanhuamao/p/13596753.html

html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图相关推荐

vue |实现点击图片预览浏览器满屏大图
安装插件 npm install vue-directive-image-previewer -D 在main.js 引入插件 import VueDirectiveImagePreviewer fr ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
iPhone App创建与审核步骤二：如何在developer.apple.com网站中设置App预览和截屏以完成App上架
iPhone App创建与审核步骤二:如何在developer.apple.com网站中设置App预览和截屏以完成App上架,根据图标规范RAD Studio 10.4 for delphi XE 或 ...
Premiere CC视频预览界面黑屏怎么办?
Premiere CC视频预览界面黑屏怎么办?Premiere CC处理完的视频预览的时候发现黑屏,该怎么解决这个问题呢?下面我们就来看看详细的教程,需要的朋友可以参考下 Premiere CC预览项 ...
Apple Store Connect App 预览和截屏提示：“载入此图像时错误“
App 预览和截屏上传图片错误,提示:"载入此图像时错误" 最近在做苹果应用审核,发现 App 预览和截屏上传图片一直上传不了. 尝试了尺寸.格式.浏览器(谷歌和safari). ...
css 全屏显示一张图片_css 如何让图片全屏的问题
1:一个很小的条状图,通过repeat后,形成一个很规则的大图背景. 但是css3出现以后,这个情况被改善了.background-size 属性可以让我们之前的希望成真.而且这个属性在firefox ...
Android 相机预览横屏竖屏 -- 显示
相机在设备上处于固定位置,无论设备是否是手机.平板电脑或计算机.当设备方向更改时, 相机方向更改.常见的布局显示比率是 4:3. 对于前置摄像头,图像缓冲区逆时针旋转(从传感器的自然方向) 对于后 ...
html一行显示四个图片,css一行显示之：实现多个图片一行显示的方法
在前面的几篇文章当中,我们一起学习了在css中怎么让文字在一行显示以及文字在一行显示时超出部分自动隐藏,今天我们来一起学习一下在css中如何让多张图片在一行显示,以帮助我们在网页制作中更加的随心所欲. ...
发生服务器错误显示内容,Win10预览版绿屏解决,发生服务器错误,显示内容预览失败...
Win10预览版15048主要修复的内容鉴于本周二已经发布了Build 15046,所以此次Build 15048没有提供任何新功能,而是继续清扫BUG. 新功能加入的停滞以及BUG被不断消灭,证明 ...

html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图

html实现点击图片全屏显示,用vue实现点击图片预览浏览器满屏大图相关推荐

最新文章

热门文章