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. As3截图转换为ByteArray传送给后台node的一种方法

    最近将以前用As3+Php做的一个画板拿出来改成了As3+nodejs(expressjs4). Node: 1. 将图片存放的路径设置为静态公开的路径. app.use(express.static ...

  2. LeetCode题解之 Increasing Order Search Tree

    1.题目描述 2/问题分析 利用中序遍历,然后重新构造树. 3.代码 TreeNode* increasingBST(TreeNode* root) { if (root == NULL) retur ...

  3. Ionic命令大全

    start [options] <PATH> [template] .............  Starts a new Ionic project in the specified P ...

  4. 2.Hibernate的主配置文件hibernate.cfg.xml

    1.配置 Hibernate 需要事先知道在哪里找到映射信息,这些映射信息定义了 Java 类怎样关联到数据库表.Hibernate 也需要一套相关数据库和其它相关参数的配置设置.所有这些信息通常是作 ...

  5. MyEclipse总是quick update解决办法

    这个问题的解决办法是关闭自动更新 1. Windows > Preferences > MyEclipse> Community Essentials, 把选项 "Sear ...

  6. JQUERY中find方法

    [jquery]find()方法和each()方法 find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 比如: $("#id") ...

  7. IDEA中的替换功能(替换代码中的变量名很好用哦)

    刚刚上班不久,这两天正在研究公司项目里面的代码,今天用阿里的插件扫描了一下代码,发现代码中有很多变量的命名,没有遵循驼峰式的命名规则.一开始我一个一个的修改这些变量名,后来无意中用了一下Ctrl+F( ...

  8. [Python] 启动 uiautomatorviewer2之后,连接成功后重新 reload画面时提示 ('Connection aborted.', error(10054, ''))

    [问题] 出现该问题不管是重启手机还是启动手机里面 uiautomator的服务,都无济于事,只有通过下面方法进行重新初使化方能解决问题 [解决方法] 在命令窗口执行如下命令 python -m ui ...

  9. yaml格式

    yaml中允许表示三种格式,分别为常量值.对象和数组 例如: 其中#作为注释,yaml中只有行注释 基本格式要求: 1.大小写敏感:2.使用缩进代表层级关系: 3.缩进只能使用空格,不能使用tab键, ...

  10. buffers与cached

    下面是buffers与cached的区别. buffers是指用来给块设备做的缓冲大小,他只记录文件系统的metadata以及 tracking in-flight pages. cached是用来给 ...