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. 如何借助 HealthKit 打造一款健身应用?

    [编者按]本文作者为 Matthew Maher,文章手把手地介绍了如何借助 HealthKit 建立简单的健身应用,包含诸多代码实例.本文系国内 ITOM 管理平台 OneAPM 编译呈现. 根据新 ...

  2. HTTP 错误 401.3 - Unauthorized asp.net mvc 图片,css,js没有权限访问

    一.在服务器上发布了一个asp.net的网站,结果是页面可以显示,但是css,js,images无法访问,报错是没有权限,HTTP 错误 401.3 - Unauthorized 二.根据以往的经验, ...

  3. Azure 中虚拟机的区域和可用性

    Azure 在中国的两个数据中心运行. 这些数据中心分组到地理区域,让用户可灵活选择构建应用程序的位置. 请务必了解 Azure 中虚拟机 (VM) 运行的方式和位置,以及最大化性能.可用性和冗余的选 ...

  4. Oracle EBS OM 创建订单

    DECLARE l_header_rec OE_ORDER_PUB.Header_Rec_Type; l_line_tbl OE_ORDER_PUB.Line_Tbl_Type; l_action_r ...

  5. [POWERSHELL] [.net 3.5] [Windows Server] 在Windows Server上安装.NET3.5

    Install-WindowsFeature Net-Framework-Core -source \\network\share\sxs

  6. 转:js小技巧 ,将彻底屏蔽鼠标右键,可用于Table ,取消选取、防止复制,IE地址栏前换成自己的图标

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu= ...

  7. NGUI和UGUI图片字 艺术字(Bitmap图片转文字)制作方法

    用图片字而不是图片 美术和程序的配合,需要程序能够很快抓住问题重点并提出解决方案.美术出的图片字比我们使用的字体更好好看,那么是否要一个个图片去拼成数字呢? NGUI创建图片字 准备材料 美术提供的数 ...

  8. Linux清除用户登录记录和命令历史方法(个人笔记)

    清除登陆系统成功的记录 [root@localhost root]# echo > /var/log/wtmp //此文件默认打开时乱码,可查到ip等信息 [root@localhost roo ...

  9. 深入浅出SharePoint——Search疑难排除

    通过Search log http://richardstk.com/2013/12/23/using-the-sharepoint-2013-search-query-tool-with-searc ...

  10. T4学习- 3、创建运行时模板

    使用 Visual Studio 预处理过的文本模板,可以在运行时在应用程序中生成文本字符串. 执行应用程序的计算机不必具有 Visual Studio. 预处理过的模板有时称为"运行时文本 ...