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 ...
随机推荐
- 用ansible修改用户密码并给予挂载点
--- - hosts: myjob gather_facts: false tasks: - name: chage user passwd user: name={{ item.name }} p ...
- Mysql 表空间和 数据页空洞
一.表空间1.表空间: innodb 引擎存储的最高层: 存放所有的数据2.独立表空间:Mysql 版本 5.6 后默认开启的单表单空间(1)Innodb 默认存储引擎页的大小为 16K :默认表空间 ...
- 一个Accecc_Token生成和缓存和读取类,微信/小程序开发必须学
Access_Token是调用微信和小程序各种接口的临时凭证,有效期2小时(7200秒),很多接口都需要调用access_token接口生成一个access_token的,例如微信支付,微信分享,公众 ...
- [WPF]鼠标位置捕捉
private void StackPanel_MouseMove(object sender, MouseEventArgs e) { Debug.WriteLine("Move& ...
- java中的进制转换
java中的进制转换及转换函数 转自:https://blog.csdn.net/V0218/article/details/74945203 Java的进制转换 进制转换原理 十进制 转 二进制: ...
- Python 安装cx_Oracle模块折腾笔记
kali linux/ubuntu下安装: 不得不说安装这个模块很蛋疼,决定做个记录. sudo apt install build-essential unzip python-dev libaio ...
- Maven项目构建利器04——Maven的一些核心概念
1.坐标 1)数学上的坐标: [1].在平面上. 使用X,Y两个向量可以唯一的定位平面上的任意一个点 [2]在空间中, 使用X,Y,Z三个向量可以唯一的定位空间中的任何一个点 2)Maven中的坐标: ...
- 基于双XCKU060+双C6678 的双FMC接口40G光纤传输加速计算卡
基于双XCKU060+双C6678 的双FMC接口40G光纤传输加速计算卡 一.板卡概述 板卡采用基于双FPGA+双DSP的信号采集综合处理硬件平台,板卡大小360mmx217mm.板卡两片FPGA提 ...
- [转]实际项目中如何使用Git做分支管理 (A successful Git branching model)
来自 https://nvie.com/posts/a-successful-git-branching-model/ In this post I present the development m ...
- phpstorm配置总结
phpstorm配合laravel框架作为项目开发,需要添加自动提示,减少查看文档的次数,本次使用的是idel-helper插件 在当前项目下 编辑composer.json文件文件,添加如下字符 & ...