vue 监听页面窗口大小

export default {
name: 'Full',
components: {
Header,
Siderbar
},
data () {
return {
screenWidth: document.body.clientWidth, // 屏幕宽度
timer: false
}
},
computed: {
isCollapse: {
get () {
return this.screenWidth < 768
},
set () {
}
}
},
watch: {
screenWidth (val) {
if (!this.timer) {
this.screenWidth = val
if (this.screenWidth < 768) {
this.isCollapse = true
}
this.timer = true
let that = this
setTimeout(function () {
that.timer = false
}, 400)
}
}
},
mounted () {
// 监听窗口大小
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth
})()
}
},
methods: {
changeMenu () {
this.isCollapse = !this.isCollapse
}
}
}

vue enter 事件

 created () {
document.onkeyup = (e) => {
if (e.keyCode === 13) {
this.fun()
} }
},

vue 监听页面宽度变化 和 键盘事件的更多相关文章

  1. vue监听页面大小变化重新刷新布局

    在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...

  2. Vue监听属性的变化

    监听属性的变化watch: { counter: function (nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!') }}

  3. vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

    引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...

  4. angular2监听页面大小变化

    一.现象 全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化 二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngO ...

  5. vue监听浏览器窗口大小变化

    首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...

  6. vue监听页面中的某个div的滚动事件,并判断滚动的位置

    在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...

  7. vue 监听state 任意值变化、监听mutations actions

    // store.watch((state) => state.count + 1, (newCount) => { // console.log(' 监听') // }) // stor ...

  8. vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)

    watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...

  9. Vue - 监听页面刷新和关闭

    一,在 created中 注册 页面刷新和关闭事件 created() {  window.addEventListener('beforeunload', e => this.test(e)) ...

随机推荐

  1. LeetCode题解之Valid Triangle Number

    1.题目描述 2.问题分析 暴力计算 3.代码 int triangleNumber(vector<int>& nums) { ; ) return res; ; i < n ...

  2. sql server 用户'sa'登录失败(错误18456)

    转载于:http://thenear.blog.51cto.com/4686262/865544 用户'sa'登录失败(错误18456)解决方案图解     当我们在使用sql server 的时候可 ...

  3. sqlserver 一键备份,异机还原脚本

    REM +---------------------------------------------------------------------------------+ REM |desc AU ...

  4. 【MySQL 5.7 Reference Manual】15.4.2 Change Buffer(变更缓冲)

    15.4.2 Change Buffer(变更缓冲)   The change buffer is a special data structure that caches changes to se ...

  5. Windows Server 2012 R2 创建AD域

        前言 我们按照下图来创建第一个林中的第一个域.创建方法为先安装一台Windows服务器,然后将其升级为域控制器.然后创建第二台域控制器,一台成员服务器与一台加入域的Win8计算机. 环境 网络 ...

  6. cd mkdir mv cp rm 命令目录相关操作

    切换目录: cd 家目录 cd. 当前目录 cd.. 当前上一级目录 cd../../当前目录的上上级目录 cd - 返回前一个目录 --------------------------------- ...

  7. Mybatis 学习笔记

    可学习渠道  MYBATIS 入门教程 1. Mybatis 介绍 Mybatis 是 sqlmap 技术,对 JDBC 进行封装,将大量的 SQL 语句外部化. 平时我们都用JDBC访问数据库,除了 ...

  8. Windows窗体数据抓取详解

    最近在客户项目上刚好遇到一个问题,项目需求是要获取某台机床的实时状态,问题点刚好就在于该机床不是传统意义上的数控机床,也不是PLC控制器,只有一个上传下载程序文件的应用程序,上面刚好有几个按钮可以大概 ...

  9. Amazon Redshift数据库

    Amazon Redshift介绍 Amazon Redshift是一种可轻松扩展的完全托管型PB级数据仓库,它通过使用列存储技术和并行化多个节点的查询来提供快速的查询性能,使您能够更高效的分析现有数 ...

  10. Mysql查询缓存Query_cache的功用

    MySQL的查询缓存并非缓存执行计划,而是查询及其结果集,这就意味着只有相同的查询操作才能命中缓存,因此MySQL的查询缓存命中率很低,另一方面,对于大结果集的查询,其查询结果可以从cache中直接读 ...