vue---监听浏览器窗口的宽度
使用VUE开发后台项目,后台项目需要进行后台根据浏览器窗口进行变化,需要使用vue来监听浏览器的窗口变化。
<template>
<div class="content" :style="height"></div>
</template> <script>
export default {
name: 'App',
data () {
return {
height:'',
}
},
components:{},
methods:{
getHeight(){
this.height = window.innerHeight - + 'px';
}
},
created(){
window.addEventListener('resize', this.getHeight);
this.getHeight()
},
destroyed(){
window.removeEventListener('resize', this.getHeight)
}
}
</script>
vue---监听浏览器窗口的宽度的更多相关文章
- vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高
1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- vue动态监听浏览器窗口高度
HTML: <div ref="page"></div> JS: data(){ return{ clientHeight:'', } } mounted( ...
- 用jQuery监听浏览器窗口的变化
$(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(docume ...
- JS实时监听浏览器宽度的变化
boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- 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 & ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 大数据之kafka-05.讲聊聊Kafka的版本号
今天聊聊kafka版本号的问题,这个问题实在是太重要了,我觉得甚至是日后能否用好kafka的关键.上一节我们介绍了kafka的几种发行版,其实不论是哪种kafka,本质上都内嵌了最核心的Apache ...
- mongodb 安装pymongo 驱动
下载驱动包: https://pypi.org/project/pymongo/ 解压: tar zxvf pymongo-3.8.0.tar.gz 安装: python setup.py i ...
- Java实现行列式计算
前天我看线代书,看到行列式,发现是个递归的式子,恰巧又正在学java,产生写程序实现的想法.写了两个小时,觉得实现了,写了个行列式放进去测试,我放的是 这个行列式,经过程序计算后发现结果是0.我以为我 ...
- siblings,next,prev
同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 siblings() next() nextAll() nextUntil() pre ...
- Cocos2d-x学习小结 配置篇
Cocos2d-x学习小结 配置篇 学习工具:Cocos2d-x用户手册,<Cocos2d-x游戏开发之旅> 首先官网下载cocos2d-x源码,安装vs2019.如果没有安装python ...
- LeetCode 1011. Capacity To Ship Packages Within D Days
原题链接在这里:https://leetcode.com/problems/capacity-to-ship-packages-within-d-days/ 题目: A conveyor belt h ...
- Greenplum 常用数据库管理语句,sql工具
转载自:https://blog.csdn.net/you_xian/article/details/78549756作者:lianghc 在greenplum 使用过程中积累的一些常用查询 ...
- java代码操作Redis
1.导入需要的pom依赖 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEn ...
- Windows加载器与模块初始化
本文是Matt Pietrek在1999年9月的MSJ杂志上发表的关于Windows加载器与模块初始化方面的文章.作者深入分析了LdrpRunInitialize璕outines例程的作用,用C语言写 ...
- 使用vault pki 为nginx 生成tls 证书文件
关于vault pki 管理的使用的可以参考官方文档或者docker-vault 以下演示一个简单的基于vault pki 为nginx 提供tls 证书 项目环境配置 nginx 配置文件 wo ...