vue监听浏览器窗口大小变化,做对应的操作

页面初始化mounted的时候，通过document.body.clientWidth和document.body.clientHeight获取到浏览器的宽和高，然后通过 window.onresize 来监听浏览器窗口的变化，在这里来改变我们的变量宽和高即可。
（created()的时候不行，因为此时document还没有生成）

<template><section class="p-10"><h1> {{ screenWidth }} × {{ screenHeight }} </h1></section>
</template>
<script>export default {data() {return {screenWidth: '',screenHeight: ''};},mounted() {this.screenWidth = document.body.clientWidth;this.screenHeight = document.body.clientHeight;window.onresize = () => {return (() => {this.screenWidth = document.body.clientWidth;this.screenHeight = document.body.clientHeight;})();};}}
</script><style lang="scss">
</style>

vue监听浏览器窗口大小变化,做对应的操作相关推荐

js 监听浏览器窗口大小变化
监听浏览器大小变化 window.addEventListener('resize', function() {// 变化后需要做的事console.log("bianhuale====== ...
html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
vue 监听map数组变化_解决vue无法侦听数组及对象属性的变化问题
一.数组 1.可以监听到的情况如push.splice.=赋值(array=[1,2,3]) 2.无法监听到的情况使用下标修改某个元素(这种比较常见) array[index] = 1 objec ...
vue监听路由的变化，跳转到同一个页面时，Url改变但视图未重新加载问题
vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题解决方法: 添加路由监听,路由改变时执行监听方法 methods:{fetchData(){console.log('路由发送 ...
vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
vue监听浏览器tab切换
vue监听浏览器tab切换描述监听tab切换浏览器页面,在离开当前页面和再次进来发生事件监听,类似与小程序的show函数 visibilitychange 详解解决 created() {doc ...
Vue监听浏览器前进后退物理返回键(浏览器自带的)
Vue监听浏览器前进后退物理返回键在某些需求下要监听用户物理按键. popstate事件只会在页面不跳转的情况下,路由发生变化触发. created() { // 创建vm实例后执行// 浏览器控制 ...
vue监听dom元素变化修改echar图表
文章目录前言一.install监听依赖二.使用步骤 1.监听指定id并修改echarts宽高监听Windows窗口变化前言提示:这里可以添加本文要记录的大概内容: vue中监听dom元素变 ...
vue 监听浏览器页面关闭_前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人...
❝ 葡萄美酒夜光杯,欲饮琵琶产品催.客户现场君莫笑,古来埋坑几人回? ❞ 最近一直在开发后台管理系统,日复一日的重复着表单表格表格表单,标准的CV仔,感觉好无聊,如何能在这种无聊的开发过程中去提升自己 ...

vue监听浏览器窗口大小变化,做对应的操作

vue监听浏览器窗口大小变化,做对应的操作相关推荐

最新文章

热门文章