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 ...
随机推荐
- (原)使用1080Ti显卡时安装ubuntu16.04.1及驱动的步骤
转载请注明出处: http://www.cnblogs.com/darkknightzh/p/6811328.html 参考网址: http://www.cnblogs.com/darkknightz ...
- linux shell 脚本攻略学习4
1.cat命令详解 cat 是concatnate(拼接)的简写. 语法: cat file1 file2 file3 .... 作用:将文件内容拼接在一起进行输出 具体应用: 1).压缩空白行 加上 ...
- realloc 使用详解(分析realloc invalid pointer、指针无效等错误)【转】
来源:http://www.cnblogs.com/ladd/archive/2012/06/30/2571420.htmlrealloc函数用来为ptr重新分配大小为size的一块内存,看似很简单, ...
- bat批处理,实现获取目录
@echo off echo 当前盘符:%~d0 echo 当前盘符和路径:%~dp0 echo 当前批处理全路径:%~f0 echo 当前盘符和路径的短文件名格式:%~sdp0 echo 当 ...
- mysql - tmp_table_size & max_heap_table_size
Command-Line Format --tmp_table_size=# System Variable Name tmp_table_size Variable Scope Global, Se ...
- ldd 的一个安全问题
我们知道“ldd”这个命令主要是被程序员或是管理员用来查看可执行文件所依赖的动态链接库的.是的,这就是这个命令的用处.可是,这个命令比你想像的要危险得多,也许很多黑客通过ldd的安全问题来攻击你的服务 ...
- java_selenium 开发环境搭建
java selenium 开发环境搭建 很多同学问我java selenium的开发环境怎么搭建,在这里简要说明一下. 安装jdk 这个自己一定要会 下载IDE 对于初学者来说java IDE无疑是 ...
- dart --- 更符合程序员编程习惯的javascript替代者
dart是google在2011年推出的一门语言,提供较为丰富的lib,并支持将代码转变为javascript,其demo code 和 demo app 也是以web前端代码来展示的. 其语言特性较 ...
- VC++对话框中加状态栏
原文链接: http://blog.chinaunix.net/uid-9847882-id-1996528.html 方法一:1.添加成员变量CStatusBarCtrl m_StatusBar;2 ...
- 删除wordpress评论表单中的网址文本框
原始效果如下 想要去掉这个链接表单,一般想到的方法就是找到 comments.php 文件中的对应表单代码删掉.但是现在只需要一段非常简单的代码就可以去除: 代码如下 复制代码 add_filter( ...