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题解之 Search in a Binary Search Tree

    1.题目描述 2.问题分析 利用递归遍历二叉查找树. 3.代码 TreeNode* searchBST(TreeNode* root, int val) { if (root == NULL) ret ...

  2. Oracle EBS INV 释放保留

    CREATE or REPPLACE PROCEDURE RelieveReservation AS -- Common Declarations l_api_version NUMBER := 1. ...

  3. [SQLSERVER] [GPO] Add the Log on as a service Right to an Account

    Add the Log on as a service Right to an Account Updated: August 8, 2008 Applies To: Windows Server 2 ...

  4. Visual Basic 6.0(VB6.0)详细安装过程

    注:大家如果没有VB6.0的安装文件,可自行百度一下下载,一般文件大小在200M左右的均为完整版的软件,可以使用. 特别提示:安装此软件的时候最好退出360杀毒软件(包括360安全卫士,电脑管家等,如 ...

  5. [cb]NGUI事件及复杂UI管理

    事件管理 看了有些文章关于NGUI的事件管理,许多人的做法的是封装一个事件处理层,避免在每个UI控件上都绑定事件处理脚本.本文说说我们项目中的UI事件管理吧. UIEventListener 我们项目 ...

  6. [Python_3] Python 函数 & IO

    0. 说明 Python 函数 & IO 笔记,基于 Python 3.6.2 参考  Python: read(), readline()和readlines()使用方法及性能比较  Pyt ...

  7. MySQL数据库的安装与基本操作

    实验要求: 1.安装mysql源码包,并做相关的配置和优化路径,启动服务. 步骤: 1)先查询MySQL软件的安装情况,如果有建议将其卸载, 2)安装光盘自带的ncurses-devel包. 3)My ...

  8. JS中的防抖与节流

    什么是防抖?and什么是节流?一起来开心的学习下吧. 首先什么是防抖:就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次.举个例子,当 ...

  9. react-native-storage 使用笔记 持续更新

    React-native-storage是在AsyncStorage之上封装的一个缓存操作插件库,刚开始接触这个也遇到了一些问题,在这里简单记录总结一下,碰到了就记下来,持续更新吧 1.安卓下stor ...

  10. JQuery 为radio赋值问题

    今天用jquery 为radio赋值,从百度查了一下方法: $("input[name='radioName'][value=2]").attr("checked&quo ...