vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高

1.在data中设置:

1  tableHeight:"500",
2  screenHeight:window.innerHeight,

2.在mounted中设置:

1   mounted() {
2       const that = this
3       window.onresize =()  =>{
4         return (()=>{
5           window.screenHeight = window.innerHeight
6           this.screenHeight = window.screenHeight;
7         })()
8       }
9     },

3.在watch中监听:

1   watch:{
2       screenHeight(val){
3         this.screenHeight = val
4         this.tableHeight = this.screenHeight - 250
5       }
6     },

原文地址:https://www.cnblogs.com/yangguoe/p/9842504.html

时间: 2024-10-08 18:18:49

vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高的相关文章

vue监听浏览器返回

代码 监听返回 mounted () { if (window.history && window.history.pushState) { // 向历史记录中插入了当前页 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.goBack, false); } }, destroyed () { window.removeEventListener('popstate',

vue监听data以及prop中的参数变化

data中的参数变化 data{ name:'', } watch: { value:function () { alert(123); }} //prop中的参数变化 props: { value: { isShow: false, data: {}, transfer: false, }}, mounted(){ this.$watch('value.isShow',res=>{ debugger })}, 原文地址:https://www.cnblogs.com/boonook/p/940

js 监听浏览器刷新还是关闭事件

原作者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: //对于ie,谷歌,360: //页面加载时只执行onload //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件

监听浏览器窗口大小的改变

<script type="text/javascript"> <!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) { winWidth = window.innerWidth; } else if ((document.body) && (document.body.clientW

js监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变化的,复制粘贴也不能监听到,于是就用到了oninput事件来监听文本框value值的改变.由于是手机端页面没有考虑IE 这货.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变

JS 监听浏览器标签页显示隐藏

JS 监听浏览器标签页显示隐藏 API document.hidden 判断页面是否隐藏的布尔值.页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 document.visibilityState (只读属性), 返回document的可见性,4个值: hidden:文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 '锁屏状态' visible:此页面在前景标签页中,并且窗口没有最小化 prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 tru

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

vue监听滚动事件,实现滚动监听(scroll滚动)

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="

vue监听滚轮事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js">&