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 ...
随机推荐
- eclipse project--->clean作用
eclipse project-->clean ,clean主要是class文件删除,并同时编译新的工程,生成新的class文件. 如果修改代码后,在运行时,还是旧代码,可能class文件还是 ...
- Win7(64位)下安装Anaconda+Tensorflow(CPU)
一.安装Python 3.5 下载Anaconda网址:https://www.anaconda.com/download/ 安装:Anaconda3-4.2.0-Windows-x86_64.exe ...
- const关键字 C与C++分析
1 C与C++的区别 1.1.C允许定义两个变量名相同的变量,而C++不允许. 在C语言中是允许定义两个名字相同的全局变量. 在C++中是不允许定义两个名字相同的全局变量. 测试代码: /* 编译环 ...
- sql server 获取随机数函数RAND()和RAND(x)
--RAND(x)返回一个随机浮点值v,范围在0~1之间(即0<=v<=1.0) --若指定一个整数参数x,则它被用作种子值,使用相同的种子数将产生重复序列.如果同一种子值多次调用RAND ...
- 正则表达式、原始字符串及re
正则表达式.原始字符串及re re是python中的一个文本解析工具,常用的方法有: 来源:https://www.ibm.com/developerworks/cn/opensource/os-cn ...
- SQL的编写顺序和执行顺序,以及空值处理,别名处理,转义字符处理
SQL即结构化查询语言.也就是用来从数据库中操作数据的.数据总的来说就是增删改查CRUD. 一,sql的分类,大致有四类: 1)DDL : 数据定义语言 create alter drop trunc ...
- host - 使用域名服务器查询主机名字
SYNOPSIS (总览) host [-l ] [-v ] [-w ] [-r ] [-d ] [-t querytype ] [-a ] host [server ] DESCRIPTION (描 ...
- MYSQL安装相关知识
将mysql安装为winsow服务 1.执行命令: mysqld-nt.exe --install (安装到windows的服务) 或者是mysqld -install 2.执行命令: net sta ...
- mysql5.7二进制包进行多实例安装
一.需求 在一台服务器上安装mysql5.7,并且部署两个实例:3306用于本机主库,3307用于其他MYSQL服务器的从库 二.下载mysql二进制包 [root@push-- src]# -lin ...
- 批量修改zencart型号:品牌名称+型号格式
批量修改zencart型号:品牌名称+型号格式 将下面代码保存为zc_change_model.php,上传到网站根目录运行即可,操作前先备份数据库 <?php /*** 批量修改zencart ...