vue 屏幕自适应及全屏放大缩小

<div id="screen-content" :class="{'fix':!flag}"><div id="main"><!--这里放内容--><!--放大缩小--><div id="screen" @click="maxScreen"></div></div>
</div>

2.data中

data(){return{screenWidth: document.documentElement.clientWidth,//屏幕宽度screenHeight: document.documentElement.clientHeight,//屏幕高度scaleNum: '',flag: true, //全屏}
}

3.js

//屏幕
mounted(){let self = thisself.scale()window.onresize = function() {self.screenWidth = document.documentElement.clientWidthself.screenHeight = document.documentElement.clientHeight}},
methods:{//全屏显示maxScreen() {let docElm = document.documentElementif (this.flag) {if (docElm.requestFullscreen) {docElm.requestFullscreen()} else if (docElm.mozRequestFullScreen) {docElm.mozRequestFullScreen()} else if (docElm.webkitRequestFullScreen) {docElm.webkitRequestFullScreen()} else if (elem.msRequestFullscreen) {elem.msRequestFullscreen()}this.flag = !this.flag} else {if (document.exitFullscreen) {document.exitFullscreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen()} else if (document.msExitFullscreen) {document.msExitFullscreen()}this.flag = !this.flag}},//自适应scale() {let vw = 1920let vh = 1080vw = this.screenWidth / vwvh = this.screenHeight / vhlet Vm = document.getElementById('main')let scaleif (vw > vh) {scale = vh} else {scale = vw}this.scaleNum = scaleVm.style.transform = 'scale(' + scale + ')'},
}
watch: {screenWidth: function() {this.scale()},screenHeight: function() {let nowHeight = this.scaleNum * 1080if (this.screenHeight <= nowHeight) {// this.flag = true}this.scale()}}

4.样式

#screen-content{position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: #EBEBEB;overflow-y: auto;overflow-x: hidden;&.fix {position: fixed;z-index: 99;}}#main{width: 1920px;height: 1080px;position: absolute;left: 50%;top: 0;margin-left: -960px;transform-origin: top center;}

vue 屏幕自适应及全屏放大缩小相关推荐

vue中实现浏览器全屏放大
方法一: (1).先下载 npm i screenfull (2).在需要的页面引入 import screenfull from 'screenfull' (3) 给一个点击事件 @click=&q ...
vue框架中使用iframe内嵌网页，并且双击实现网页全屏放大
vue框架中使用iframe内嵌网页,并且双击实现网页全屏放大利用Iframe插入网页 <iframe ref="iframe" src="https://www ...
播放器SkeyeWebPlayer多分屏（九宫格）、拖动（拖入分屏播放）、双击分屏放大缩小等功能的使用
免费视频直播.点播H5播放器SkeyeWebPlayer多屏(九宫格).双击分屏放大缩小.拖动(拖入分屏播放)等功能的使用. 1.SkeyeWebPlayer多屏(九宫格)布局切换,一般采用1.4.9 ...
F11快捷键自适应缩放全屏(CSS示例)
一.F11快捷键在使用B/S系统时,为了突出展示系统功能,一般会按F11快捷键将浏览器全屏展示.全屏展示时将浏览器的地址栏.书签栏.PC机的任务栏等都被隐藏,显示器仅仅显示整个web系统的所有元素, ...
微信html 全屏显示,关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. 调用微信图片浏览器的函数 functio ...
win10右下角显示桌面图标消失并且点击左下角Windows按钮或者打开任意文件夹直接全屏无法缩小
记录一次糟心的经历问题: win10右下角显示桌面图标消失并且点击左下角Windows按钮或者打开任意文件夹直接全屏无法缩小方法: 问题: win10右下角显示桌面图标消失并且点击左下角Windo ...
h5点击图片自动放大_关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson ...
jQuery炫酷点击变形全屏放大的模态窗口
这是一款效果非常炫酷的点击变形全屏放大的 jQuery模态窗口插件.该模态窗口插件当用户点击某个按钮时,按钮先变形缩小变为圆形,然后在由小圆到大圆全屏放大,效果非常酷. 最后在生成模态窗口的时候的动画 ...
echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大
1.如果是多个图表,那就创建一个公共组件(子组件),如下: <template> //自定义弹窗<el-dialogtop="150px"width=" ...

vue 屏幕自适应及全屏放大缩小

vue 屏幕自适应及全屏放大缩小相关推荐

最新文章

热门文章