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 ...
随机推荐
- Java开发环境之MySql
查看更多Java开发环境配置,请点击<Java开发环境配置大全> 叁章:MySql安装教程 1)去官网下载MySql安装包 https://www.mysql.com/downloads/ ...
- StringUtils系列之StringUtils.isNotBlank()和StringUtils.isNotBlank()的区别
/** 1. * StringUtils.isNotBlank(); * 判断参数是否不为空. * 1.如果不为空返回true. * 2.如果为空返回false. * StringUtils.isNo ...
- linux查看磁盘分区
df 查看磁盘分区使用状况 用法:df [选项]... [文件]... Show information about the file system on which each FILE resid ...
- tensorflow tfrecoder read write
# write in tfrecord import tensorflow as tf import os os.environ[' FLAGS = tf.app.flags.FLAGS tf.app ...
- 在Windows下/Linux下安装jdk版本
到官网https://www.oracle.com/technetwork/java/javase/downloads/index.html选择适合自己的版本, 目前我做测试和开发主要用的是jdk 8 ...
- 使用TFT LCD制作Arduino触摸屏计算器
Arduino开发板总是可以帮助我们轻松地构建一个项目,并使其看起来更具有吸引力.对一个带有触摸功能的液晶显示屏进行编程听起来可能是一件复杂的工作,但是通过使用Arduino库和扩展模块可以使得这项工 ...
- Kotlin反射实践操作详解
继续对反射进行实战. 获取构造方法: 先定义一个主构造方法,2个次构造方法,接下来咱们用反射来获取一下构造方法: 其结果: [fun <init>(kotlin.Int, kotlin.S ...
- Windows环境下安装和使用nginx1.16.0
nginx是一款开源的HTTP服务器和反向代理服务器,nginx可以作为Web服务器提供HTTP访问功能,类似于Apache.IIS等.目前nginx已经在国内外很多网站作为Web服务器或反向代理服务 ...
- Linux TTY介绍
1. TTY介绍 TTY(TeleType)指Linux中的一类终端(Terminal)设备, 是一种字符设备 在Linux中, tty可分为如下几类- 串行端口终端(serial port term ...
- php正则表达示的定界符
在学习正则表达示前,我们先要来学习正则表达示的定界符. 定界符,就是定一个边界,边界已内的就是正则表达示. PHP的正则表达示定界符的规定如下: 定界符,不能用a-zA-Z0-9\ 其他的都可以用.必 ...