vue 监听页面宽度变化 和 键盘事件
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 监听页面宽度变化 和 键盘事件的更多相关文章
- vue监听页面大小变化重新刷新布局
在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...
- Vue监听属性的变化
监听属性的变化watch: { counter: function (nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!') }}
- vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题
引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...
- angular2监听页面大小变化
一.现象 全屏页面中的图表,在很多的时候需要 resize 一把,以适应页面的大小变化 二.解决 1.引入 : import { Observable } from 'rxjs'; 2.使用(在ngO ...
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- vue监听页面中的某个div的滚动事件,并判断滚动的位置
在开发中常常会遇到这样一个vue页面,页面分为左右两部分,左边是目录树,右边是一个类名为xq-box的div,在xq-box中多个div上下并列布局,每个div中的内容就对应着左边目录树中的相应节点, ...
- vue 监听state 任意值变化、监听mutations actions
// store.watch((state) => state.count + 1, (newCount) => { // console.log(' 监听') // }) // stor ...
- vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)
watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...
- Vue - 监听页面刷新和关闭
一,在 created中 注册 页面刷新和关闭事件 created() { window.addEventListener('beforeunload', e => this.test(e)) ...
随机推荐
- 数据库小组与UI小组第一次对接
时间:2018.6.1,21:30 ~ 23:00 人员:除黄志鹏外全体成员,因为黄志鹏临时有事 工作内容: 主要为数据库小组与UI第二组对接,并将成果汇总到github仓库.另外UI第一组重构了代码 ...
- 固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异
固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异 在看这篇文章之前可以先看一下下面的文章: SSD小白用户收货!SSD的误区如何解决 这样配会损失性能?实测6种特殊装机方式 听说固态 ...
- MySQL安全策略
0.导读 MySQL被运用于越来越多的业务中,在关键业务中对数据安全性的要求也更高,如何保证MySQL的数据安全? MySQL被运用于越来越多的业务中,在关键业务中对数据安全性的要求也更高,如何保证M ...
- tail 尾巴
tail用法:尾巴,取文件的最后N行,默认前10行, -n 2 取前2行-n 2,简写就是-2 -f 文件 跟踪一个文件尾部的时时变化. 克隆出一个窗口执行:循环脚本:for n in `seq 1 ...
- python基础学习2
一.算数运算符 +加法,-减法,*乘法,/除法,//地板除,%求余,**幂运算. 二.逻辑运算符 非not.且and.或or.优先级依次为not,and,or. 三.print()end结尾 prin ...
- 几种模型文件(CDM、LDM、PDM、OOM、BPM)
概念数据模型 (CDM): 帮助你分析信息系统的概念结构,识别主要实体.实体的属性及实体之间的联系.概念数据模型(CDM)比逻辑数据模型 (LDM)和物理数据模型(PDM)抽象.CDM 表现数据库的全 ...
- qt调用sql server存储过程并获取output参数
最近新做的一个项目需要使用qt5连接另一台机器上的sql server,虽然网上已有类似文章,但还是有些其中很少提及的问题,故在这里汇总下: qt连接sql server可以参考这篇文章: <Q ...
- yum 私有仓库
参考地址:https://blog.oldboyedu.com/autodeploy-yum YUM主要用于自动安装.升级rpm软件包,它能自动查找并解决rpm包之间的依赖关系.要成功的使用YUM工具 ...
- 为什么Github要把代码合并请求称为pull request而不是push request?
问题: 我的理解是:我做了一些修改,我请求把我的修改push到你的仓库,然后你review一下我的代码,如果没问题就接受请求merge,这样的话叫做push request岂不是更合适?因为这个操作是 ...
- PHPer是草根吗
以下文字并没有非常多的技术词汇,所以只要对PHP感兴趣的人都可以看看. PHPer是草根吗? 从PHP诞生之日起,PHP就开始在Web应用方面为广大的程序员服务.同时,作为针对Web开发量身定制的脚本 ...