vue动态监听浏览器窗口高度
HTML:
<div ref="page"></div>
JS:
data(){
return{
clientHeight:'',
}
}
mounted(){
this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
let that = this;
window.onresize = function(){
this.clientHeight = `${document.documentElement.clientHeight}`;
if(that.$refs.page){
that.$refs.page.style.minHeight = clientHeight - + 'px';
}
}
}
watch:{
clientHeight(){ //如果clientHeight 发生改变,这个函数就会运行
this.changeFixed(this.clientHeight)
}
}
methods:{
changeFixed(clientHeight){
if(this.$refs.page){
this.$refs.page.style.minHeight = clientHeight - + 'px';
}
}
}
vue动态监听浏览器窗口高度的更多相关文章
- vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高
1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...
- 用jQuery监听浏览器窗口的变化
$(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(docume ...
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- vue---监听浏览器窗口的宽度
使用VUE开发后台项目,后台项目需要进行后台根据浏览器窗口进行变化,需要使用vue来监听浏览器的窗口变化. <template> <div class="conte ...
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- 详解vuex结合localstorage动态监听storage的变化
这篇文章主要介绍了详解vuex结合localstorage动态监听storage的变化,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 需求:不同组件间共用同一数据,当一个 ...
- JS实时监听浏览器宽度的变化
boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...
- js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
随机推荐
- linux信号调用机制
在Linux中,信号是进程间通讯的一种方式,它采用的是异步机制.当信号发送到某个进程中时,操作系统会中断该进程的正常流程,并进入相应的信号处理函数执行操作,完成后再回到中断的地方继续执行. 需要说明的 ...
- RabbitMQ入门教程(四):工作队列(Work Queues)
原文:RabbitMQ入门教程(四):工作队列(Work Queues) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https:/ ...
- ExpressionToSQL
ExpressionToSql using System; using System.Collections.Generic; using System.Collections.ObjectModel ...
- laravel5.8 Models
<?php namespace App\Models; use Illuminate\Notifications\Notifiable;use Illuminate\Contracts\Auth ...
- OpenCV笔记(I)
这里记一下开始入手OpenCV碰到的一些问题以及解决办法.学习参考书是<OpenCV 4 计算机视觉项目实战(原书第2版)>,ISBN:978-7-111-63164-4. Ubuntu ...
- zabbix监控之同时向多人邮件报警
安装环境: zabbix-server zabbix邮件报警配置步骤说明: 安装发送邮件的工具sendEmail 准备一个发送邮件的脚本 修改zabbix配置文件中指定的脚本路径 关联脚本名称 用户 ...
- 学习-Pytest(三)setup/teardown
1. 用例运行级别 模块级(setup_module/teardown_module)开始于模块始末,全局的 函数级(setup_function/teardown_function)只对函数用例生效 ...
- Laravel-admin 加载视图后,blade 模板 JS 失效
laravel-admin js无法解析 解决 在不需要使用 pjax 的地方使用 Admin::disablePjax();
- (转)分布式锁的几种使用方式(redis、zookeeper、数据库)
https://blog.csdn.net/u010963948/article/details/79006572
- linux基础命令--lsof
lsof(list open files)作用: 是一个列出当前系统打开文件的工具. 注: 在终端下输入lsof即可显示系统打开的文件,因为 lsof 需要访问核心内存和各种文件,所以必须以 root ...