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)) ...
随机推荐
- go语言练习:结构体
package main import "fmt" type book struct { title string author string page int } func ma ...
- Mongodb集群与分片 1
分片集群 Mongodb中数据分片叫做chunk,它是一个Collection中的一个连续的数据记录,但是它有一个大小限制,不可以超过200M,如果超出产生新的分片. 下面是一个简单的分片集群 ...
- java io详解(1)
一.java io结构图 二.java io的开始:文件 三.字节流: 一.java io结构图 流分类: 1.Java的字节流 InputStream是所有字节输入流的祖先,而OutputSt ...
- 【mysql数据库】Linux下mysql安装连接全过程(含有问题详解)
本次安装操作在腾讯云上实现(版本:CentOS Linux release 7.4.1708 (Core) ). 根据教程实现(中途各种挖坑,填坑...),地址:http://www.runoob.c ...
- .net 页面传参方式总结
一.使用Querystring Querystring是一种非常简单的传值方式,其缺点就是:安全性低.会把要传送的值显示在浏览器的地址栏中(也就是不需要保密得参数),并且在此方法中不能够传递对象,参数 ...
- MongoDB3.2配置文件.md
Core Options systemLog Options systemLog: verbosity: <int> quiet: <boolean> traceAllExce ...
- pdf阅读器开发
文章基于sumatrapdf的实现(当中mupdf中的内容不会太多涉及).以及自己在此基础上做的 优化,扩展.详细效果能够參考百度阅读器精简版. 最NB的还是得属于foxit.渲染速度一流,展示大图片 ...
- 矩阵dp
矩阵dp 这里是矩阵dp,不是矩阵乘法优化dp. 矩阵上的dp好像也没什么特殊的?大概有一个套路就是从上向下,从左向右进行dp吧. 首先第一道题好像不是矩阵dp... 1005 矩阵取数游戏:http ...
- 可以获取JVM信息的一些管理工具类
一些可以获取JVM信息的java工具类 BufferPoolMXBean.class ClassLoadingMXBean.class CompilationMXBean.class GarbageC ...
- 腾讯课堂老师qq号码转换成 teacherid
result = 215696775^858006833 if(result){ result=4294967296+result; } alert(result);