vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window.onresize 来监听浏览器窗口的变化,在这里来改变我们的变量宽和高即可。
(created()的时候不行,因为此时document还没有生成)
<template>
<section class="p-10">
<h1> {{ screenWidth }} × {{ screenHeight }} </h1>
</section>
</template>
<script>
export default {
data() {
return {
screenWidth: '',
screenHeight: ''
};
},
mounted() {
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
})();
};
}
}
</script> <style lang="scss">
</style>
嗯。就酱~~
vue监听浏览器窗口大小变化的更多相关文章
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- vue监听页面大小变化重新刷新布局
在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...
- Vue监听属性的变化
监听属性的变化watch: { counter: function (nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!') }}
- vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高
1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...
- vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题
引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...
- vue 监听state 任意值变化、监听mutations actions
// store.watch((state) => state.count + 1, (newCount) => { // console.log(' 监听') // }) // stor ...
- js实现监听浏览器窗口大小改变事件
window.onresize = function(){ }
- vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)
watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...
- jquery如何监听浏览器窗口大小并根据不同的大小输出不同的值
$(window).bind("load resize",function(){ document.documentElement.clientWidth >= 600 ? ...
随机推荐
- Unix系统编程()信号类型和默认行为
信号类型和默认行为 就是讲了有多少个信号类型 好多啊,后面用到了再看...
- PHP——文件操作
自己写的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- 使用info命令查看Redis信息和状态
redis-cli连接服务器后,使用info命令查看Redis信息和状态: ? 1 info 其中memory段显示了redis的内存使用状态. 以下内容复制自:http://redisdoc.com ...
- hdu6134 Battlestation Operational 莫比乌斯第一种形式
/** 题目:hdu6134 Battlestation Operational 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6134 题意:f(n) = ...
- Java解析json(二):jackson
Java解析json(二):jackson 官方参考 Jackson Home Page:https://github.com/FasterXML/jackson Jackson Wiki:htt ...
- python手册
https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/
- Hadoop源码分析之读文件时NameNode和DataNode的处理过程
转自: http://blog.csdn.net/workformywork/article/details/21783861 从NameNode节点获取数据块所在节点等信息 客户端在和数据节点建立流 ...
- 第二百五十一节,Bootstrap项目实战--响应式轮播图
Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...
- 【BZOJ】1690: [Usaco2007 Dec]奶牛的旅行(分数规划+spfa)
http://www.lydsy.com/JudgeOnline/problem.php?id=1690 第一题不是水题的题.. 分数规划.. T-T 百度吧..http://blog.csdn.ne ...
- ActiveMQ搭建
下载 到ActiveMQ官网,找到下载点. 目前, 官网为http://activemq.apache.org/ Linux版本下载点之一为:http://apache.fayea.com/activ ...