vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高
1.在data中设置:
tableHeight:"500",
screenHeight:window.innerHeight,
2.在mounted中设置:
mounted() {
const that = this
window.onresize =() =>{
return (()=>{
window.screenHeight = window.innerHeight
this.screenHeight = window.screenHeight;
})()
}
},
3.在watch中监听:
watch:{
screenHeight(val){
this.screenHeight = val
this.tableHeight = this.screenHeight - 250
}
},
vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高的更多相关文章
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- vue监听页面大小变化重新刷新布局
在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
- JS实时监听浏览器宽度的变化
boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Ubuntu常用命令大全[显示桌面]
Ubuntu常用命令大全 查看软件xxx安装内容 #dpkg -L xxx 查找软件 #apt-cache search 正则表达式 查找文件属于哪个包 #dpkg -S filename apt-f ...
- The minimum required Cuda capability is 3.7.
stackoverflow上早有讨论 https://stackoverflow.com/questions/33651810/the-minimum-required-cuda-capability ...
- nginx 实现valid_referer全面解析
先来补充点知识,然后在进行讲解. 先看下两种HTTP head 一个是直接输入网址打开的head,另一个是通过搜索引擎打开的网址head 一:直接输入网址打开的 (Request-Line) GET ...
- java 取模运算% 实则取余 简述 例子 应用在数据库分库分表
java 取模运算% 实则取余 简述 例子 应用在数据库分库分表 取模运算 求模运算与求余运算不同.“模”是“Mod”的音译,模运算多应用于程序编写中. Mod的含义为求余.模运算在数论和程序设计中 ...
- Java and C# Comparison
原文:http://www.harding.edu/fmccown/java_csharp_comparison.html Java Program Structure C# package hell ...
- 10个很棒的学习Android 开发的网站
1. Android Developers 作为一个Android开发者,官网的资料当然不可错过,从设计,培训,指南,文档,都不应该错过,在以后的学习过程中慢慢理解体会. 2. Android Gui ...
- 【java】解析java中的数组
目录结构: contents structure [+] 一维数组 1,什么是一维数组 2,声明一维数组的三种方式 二维数组 1,什么是二维数组 2,声明二维数组的3种方式 3,二维数组的遍历示例 数 ...
- 【C语言】练习3-5
题目来源:<The C programming language>中的习题P51 练习2-1: 编写函数itob(n, s, b),将整数n转换为以b为底的数,并将转换结果以字符的形 ...
- App开发准备
一. Android开发 二. IOS开发 1. 准备苹果电脑 Mac pro 一般比较贵,很少人或公司使用 替代的产品为 iMac 或 Mac mini 中配8G内存版 2. 准备苹果开发者账户,才 ...
- js 数组的深度递归搜索