Vue 监听 window.resize_福州司马懿的博客

相关文章推荐

风流倜傥的核桃 · Anonymous Relay Not ...· 1 年前 ·

骑白马的灭火器 · SQL SERVER ...· 2 年前 ·

强悍的牛肉面 · 数据源和工作簿的 RLS 最佳实践 - ...· 2 年前 ·

霸气的骆驼 · 如何在页面上显示JS中的变量值，以及JS中v ...· 2 年前 ·

慷慨的丝瓜 · 3分钟短文 | Laravel ...· 2 年前 ·

< meta charset = "utf-8" /> < title > Vue中绑定全局事件onresize </ title > < meta name = "viewport" content = "width=device-width" /> < script src = "https://cdn.bootcss.com/vue/2.5.16/vue.min.js" > </ script > </ head > < table id = "app" > < tr > < td > document.body.clientXXX </ td > < td > 屏幕可见区域 </ td > < td > { { clientSize }} </ td > </ tr > < tr > < td > document.body.offsetXXX </ td > < td > 屏幕可见区域 </ td > < td > { { offsetSize }} </ td > </ tr > < tr > < td > document.body.scrollXXX </ td > < td > 网页正文全文 </ td > < td > { { scrollSize }} </ td > </ tr > < tr > < td > window.innerXXX </ td > < td > 内边界（视口） </ td > < td > { { innerSize }} </ td > </ tr > < tr > < td > window.outerXXX </ td > < td > 外边框 </ td > < td > { { outerSize }} </ td > </ tr > < tr > < td > window.screen.availXXX </ td > < td > 屏幕可用工作区 </ td > < td > { { availSize }} </ td > </ tr > < tr > < td > window.screen.clientXXX </ td > < td > 屏幕物理分辨率 </ td > < td > { { screenSize }} </ td > </ td > </ tr > < tr > < td > window.screen.devicePixelRatio </ td > < td > 屏幕缩放因子 </ td > < td > { { devicePixelRatio }} </ td > </ tr > < tr > < td > window.screen.deviceXDPI </ td > < td > DPI </ td > < td > { { deviceXDPI }} </ td > </ tr > </ table > < script > function getDPI () { var arrDPI = new Array ; var tip; if (window.screen.deviceXDPI) { tip = "support window.screen.deviceXDPI" ; arrDPI[ 0 ] = window.screen.deviceXDPI; arrDPI[ 1 ] = window.screen.deviceYDPI; else { tip = "not support window.screen.deviceXDPI" ; var tmpNode = document.createElement( "DIV" ); tmpNode.style.cssText = "width:1in;height:1in;left:0px;top:0px;z-index:99;" ; document.body.appendChild(tmpNode); arrDPI[ 0 ] = parseInt (tmpNode.offsetWidth); arrDPI[ 1 ] = parseInt (tmpNode.offsetHeight); tmpNode.parentNode.removeChild(tmpNode); return arrDPI + ' (' + tip + ')' ; new Vue({ el: '#app' , data: { clientSize: document.body.clientWidth + ' * ' + document.body.clientHeight, offsetSize: document.body.offsetWidth + ' * ' + document.body.offsetWidth, scrollSize: document.body.scrollWidth + ' * ' + document.body.scrollHeight, that.innerSize = window.innerWidth + ' * ' + window.innerHeight; that.outerSize = window.outerWidth + ' * ' + window.outerHeight; availSize: window.screen.availWidth + ' * ' + window.screen.availHeight, screenSize: window.screen.width + ' * ' + window.screen.height, devicePixelRatio: window.devicePixelRatio + 'X' , deviceXDPI: getDPI(), created() { const that = this ; window.onresize = ()=> { that.clientSize = document.body.clientWidth + ' * ' + document.body.clientHeight; offsetSize = document.body.offsetWidth + ' * ' + document.body.offsetWidth; scrollSize = document.body.scrollWidth + ' * ' + document.body.scrollHeight; that.innerSize = window.innerWidth + ' * ' + window.innerHeight; that.outerSize = window.outerWidth + ' * ' + window.outerHeight; that.availSize = window.screen.availWidth + ' * ' + window.screen.availHeight; that.screenSize = window.screen.width + ' * ' + window.screen.height; that.devicePixelRatio = window.devicePixelRatio + 'X' ; that.deviceXDPI = getDPI(); </ script > </ body > </ html >

Vue 中的 created，也可以用 mounted 来代替。
它们的共同点是仅在Vue初始化时执行一次。
created：在实例创建完成后执行的钩子
mounted：编译好的HTML挂载到页面完成后执行的事件钩子

另外，Vue中可以直接调用JS的方法。但如果要调用 Vue中的 methods 中定义的方法就会绕一点，需要使用 this.$options.methods.MethodName();

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;Vue中绑定全局事件onresize&lt;/title&gt; &lt;meta name="viewport" con npm i @seregpie/ vue - resize -sensor import Vue Resize Sensor from '@seregpie/ vue - resize -sensor' ;  < script src =" https://unpkg.com/ vue @2 " > </ script > < script src =" https://unpkg.com/@ vue /composition-api " > </ script >  < script src =" https://unpkg.com/ vue @3 " > </ script >

vue 监听窗口变化坑 window .on resize = function temp() { this.H Window = ( window .innerHeight - 60) + “px” 这代码看似没什么问题，可是文本高度就是不等于窗口高度 let that = this window .addEventListener(“ resize ”, function() { return (()...

网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 我们将document.body.clientWidth赋值给data中自定义的变量 1 document.body.clientWidth ==> BODY对象宽度 2 document.body.clientHeight ==> BODY对象高度 3 document.documentElement.clientWidth ==> 可见区域宽度 4 documen...

window 与screen window 是浏览器支持的全局变量，也可以通过document.defaultView获取它，表示浏览器的窗口信息。 innerHeight与outerHeight innerHeight表示窗口内容区域的高度，这是不包括边框、菜单栏的。而outerHeight是窗口的整体高度，包括边框、菜单栏等。所以一般常用的是innerHeight。 screen.height screen是指的屏幕，表示当前整个显示器显示的屏幕部分，不限于当前的窗口。height是屏幕的宽度，例如屏幕

1.场景：最近在实现一个监控系统的dashboard页面，这个页面上有很多的echarts图表，当浏览器窗口大小变化时，页面的所有数据要重新计算宽高值，于是使用了 window .addEventListener(" resize ") 来解决这个问题。 2. 结果：在使用过程中，发现当浏览器窗口多次改变大小之后，页面卡顿的很厉害，查看浏览器的cpu占用率也很高，迟迟降不下来。郁闷中～，因为在之前的项目中也使用过监听事件，但没有发现过这个问题，就很自信～，罪过呀 3.排查了很长时间，各种百度，无意中看到wind

watch: { '$ vue tify.breakpoint.width' (newVal, oldVal) { // do something when window .innerWidth changes 其中`$ vue tify.breakpoint.width`是 Vue tify框架提供的一个属性，可以实时获取当前窗口的宽度。当窗口宽度发生变化时，watch函数会自动执行相应的操作。 Unable to make protected final java.lang.Class java.lang.ClassLoader.defineClass weixin_47668376: 在导出excel时报这个错，有用的已解决，加了这个且修改了java-version Qt 使用Poppler实现pdf阅读器 weixin_45933949: 你好，我为什么运行的时候会报错-错误：未定义对`__imp__ZN7Poppler8DocumentD1Ev'的引用 docker 安装 oracle 米斯特怀特墨客: 这还叫复杂？？？装装数据库就知道了，这个简单太多太多了，装数据库没有不踩坑的时候，急用的话用docker有什么问题？力挺博主，这可太惊喜了！ docker 安装 oracle o荷塘月色o: 你在开头说在真机上装oracle很复杂，我还以为到docker上有惊喜呢。看完你写了这么多，不是同样很复杂？