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. GIT回推本地commit近期版本

    一次意外吧,本地add并且commit之后拉了别人错误的代码下来,后来本地又需要进行编写测试,无奈只能回推到自己刚刚commit过的代码,但是git命令除了拉去提交等其他的不是很熟悉,在度娘之后也遇到 ...

  2. python 多进程 Event的使用

    Event事件  多进程的使用 通俗点儿讲  就是 1.  Event().wait()    插入在进程中插入一个标记(flag)  默认为 false  然后flag为false时  程序会停止运 ...

  3. 笔记本键盘开关方法 仅限window系统

    按win键,搜索CMD(命令提示符).右键-以管理员身份运行.关闭笔记本键盘输入:sc config i8042prt start= disabled回车-重启电脑即可.需要重新启用键盘的话,输入:s ...

  4. Office Web app server 2013 目前无法和windows server 2012 R2兼容。

    另外旧版的office文档和PDF格式不支持预览功能.

  5. VS 代码整理插件推荐:CodeMaid

    一直在用,觉得很不错,其他插件基本上不用了,所以拿来记录并分享一下.CodeMaid 说明文档CodeMaid 下载安装不用说明了,使用看说明文档就好. CodeMaid和ReSharp类似,开源且免 ...

  6. 【干货】一文理解Druid原理架构(时序数据库,不是ali的数据库连接池)

    Druid.io(以下简称Druid)是2013年底开源出来的, 主要解决的是对实时数据以及较近时间的历史数据的多维查询提供高并发(多用户),低延时,高可靠性的问题. Druid简介: Druid是一 ...

  7. 028、HTML 标签3表单标签插入组件

    内容:表单标签插入组件(经常使用)############################################################## form表单标签和input组件 < ...

  8. 【Android自动化】测试系统的应用程序安装与卸载性能,判断长时间反复安装对系统的整体性能影响

    # -*- coding:utf-8 -*- import sys import os import time import subprocess from uiautomator import de ...

  9. flexible.js结合rem实现移动端自适应布局

    1. 配置开发工具(sublime)插件      https://github.com/flashlizi/cssrem     注意: 只有在‘.css’后缀文件才能使用此插件功能   2. 在h ...

  10. swift static与class修饰符:static不参与动态派发

    static与class 都有类型成员的含义:相对于实例成员: static的另一个意思是静态派发:所以不能被继承. 要使用动态派发和继承的机制必须使用class继承. static的其它常见含义: ...