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. Windows安装PostgreSQL数据库 无法初始化数据库问题

    背景 由于项目的需要,使用PostgreSQL数据库,因此在Windows上安装PostgreSQL数据库.但是在安装后,无法访问本地数据库,这个时候查看/data目录,没有任何文件.而且安装过程中, ...

  2. Hibernate Criteria用法大全

    1.标准查询简介 2.比较运算符 3.分页使用标准 4.排序结果 5.预测与聚合 6.关联 7. 动态关联抓取 8.查询示例 9.投影(Projections).聚合(aggregation)和分组( ...

  3. 单例模式实现 Volitile , interlocked

    //单例模式: //1. 双检锁机制 Volatile.write() //2. 静态变量 //3. Interlocked.CompareExchange(ref single, temp, nul ...

  4. 工作中遇到的问题收集--.NET

    一.拒绝访问 temp 目录.用来运行 XmlSerializer 的标识“IIS APPPOOL\MZJYMIS”没有访问 temp 目录的足够权限.CodeDom 将使用进程正在使用的用户帐户进行 ...

  5. IP解析计算机名称

    #-*- coding: UTF-8 -*- import subprocess,sys,threading reload(sys) sys.setdefaultencoding('utf-8') d ...

  6. 解决:Windows 强制升级为8.1之后 Mysql连接不上, VisualSVN Server无服务

    1.mysql 连不上,只要将mysql重新加为windows服务即可.(我的是mysql-5.6.24-winx64 解压版)    方法:mysqld --install mysql --defa ...

  7. ansible 碎记录

    https://www.zhukun.net/archives/8167 ansible -i new/hosts new -m authorized_key -a "user=root k ...

  8. wx.aui.AuiManager部分/布局翻译

    wx.aui.AuiManager wx.aui.AuiManager 是AUI框架类中的主要类 wx.aui.AuiManager管理于指定的wx.Frame相关联的窗口,通过使用窗口的wx.aui ...

  9. Mac上Hive环境搭建

    本文介绍在Mac上搭建Hive环境. 建议首先配置好Hadoop,搭建与配置可以参考我之前的博文Mac Hadoop的安装与配置. 当然你也可以选择使用Docker搭建环境,本文不作介绍. 安装 对于 ...

  10. ES6标准简介之Babel转码器解说

    ES6是ECMAScript 6的简称,是JavaScript语言的下一代标准,现在基于jquery库的前端开发js所使用的标准是ES5(ECMAScript 5).ES6已于2015年6月正式发布. ...