VueJs监听window.resize方法示例

Vuejs 本身就是一个 MVVM 的框架。

但是在监听 window 上的 事件 时，往往会显得 力不从心。

比如 这次是 window.resize

恩，我做之前也是百度了一下。看到大家伙都为这个问题而发愁。

问题： 今天我也 遇到了这样一个问题， 是关于canvas 自适应。 根据窗口的变化去变化 canvas 的宽度

备注： 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 （这里用的 Vue 2.x 、ES6）

解决方案：

第一步： 先在 data 中去 定义 一个记录宽度是 属性

data: {
 screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）
}

第二步： 我们需要 讲 reisze 事件在 vue mounted 的时候 去挂载一下它的方法

  mounted () {
   const that = this
   window.onresize = () => {
    return (() => {
     window.screenWidth = document.body.clientWidth
     that.screenWidth = window.screenWidth
    })()
   }
  }

第三步： watch 去监听这个 属性值的变化，如果发生变化则讲这个val 传递给 this.screenWidth

  watch: {
   screenWidth (val) {
    this.screenWidth = val
   }
  }

第四步：优化 因为 频繁 触发 resize 函数，导致页面很卡的 问题

  watch: {
   screenWidth (val) {
    if (!this.timer) {
     this.screenWidth = val
     this.timer = true
     let that = this
     setTimeout(function () {
      // that.screenWidth = that.$store.state.canvasWidth
      console.log(that.screenWidth)
      that.init()
      that.timer = false
     }, 400)
    }
   }
  }

最后一步： 去看看你想要的结果吧~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法

    浏览器窗口大小变化时使用resize事件对框架不起作用的解决办法,如下: 复制代码 代码如下: $(window).resize(function(){var surH = $(window).height();$(".pic_conent").height(surH);} 当浏览器变化,拉大拉小时,没有反应: 方法一:在标签上加入  onLoad="" onResize=""  方法  写上对应的方法即可方法二:window.onresize=

  • Java集合系列之HashMap源码分析

    前面我们已经分析了ArrayList和LinkedList这两个集合,我们知道ArrayList是基于数组实现的,LinkedList是基于链表实现的.它们各自有自己的优劣势,例如ArrayList在定位查找元素时会优于LinkedList,而LinkedList在添加删除元素时会优于ArrayList.而本篇介绍的HashMap综合了二者的优势,它的底层是基于哈希表实现的,如果不考虑哈希冲突的话,HashMap在增删改查操作上的时间复杂度都能够达到惊人的O(1).我们先看看它所基于的哈希表的结

  • Java源码角度分析HashMap用法

    -HashMap- 优点:超级快速的查询速度,时间复杂度可以达到O(1)的数据结构非HashMap莫属.动态的可变长存储数据(相对于数组而言). 缺点:需要额外计算一次hash值,如果处理不当会占用额外的空间. -HashMap如何使用- 平时我们使用hashmap如下 Map<Integer,String> maps=new HashMap<Integer,String>(); maps.put(1, "a"); maps.put(2, "b&quo

  • 详谈HashMap和ConcurrentHashMap的区别(HashMap的底层源码)

    HashMap本质是数组加链表,根据key取得hash值,然后计算出数组下标,如果多个key对应到同一个下标,就用链表串起来,新插入的在前面. ConcurrentHashMap在HashMap的基础上将数据分为多个segment,默认16个,然后每次操作对一个segment加锁,避免多线程锁的几率,提高并发效率. 1. HashMap的数据结构 HashMap底层就是一个数组结构,数组中存放的是一个Entry对象,如果产生的hash冲突,这时候该位置存储的就是一个链表了. HashMap中En

  • Java开发之HashMap的使用和遍历

    Java开发之HashMap的使用和遍历 1:使用HashMap的一个简单例子 package com.pb.collection; import java.util.HashMap; import java.util.Iterator; import java.util.Set; import java.util.Map.Entry; public class HashMapDemo { public static void main(String[] args) { HashMap<Stri

  • Java源码解析HashMap的resize函数

    HashMap的resize函数,用于对HashMap初始化或者扩容. 首先看一下该函数的注释,如下图.从注释中可以看到,该函数的作用是初始化或者使table的size翻倍.如果table是null,那么就申请空间进行初始化.否则,因为我们在使用2的指数的扩张,在原来table的每个位置的元素,在新的table中,他们要么待在原来的位置,要么移动2的指数的偏移.从这里可以看出,扩容前table每个位置上如果有多个元素,元素之间组成链表时,在扩容后,该链表中的元素,有一部分会待在原地,剩下的元素会

  • 基于Java中最常用的集合类框架之HashMap(详解)

    基于Java中最常用的集合类框架之HashMap(详解)

    一.HashMap的概述 HashMap可以说是Java中最常用的集合类框架之一,是Java语言中非常典型的数据结构. HashMap是基于哈希表的Map接口实现的,此实现提供所有可选的映射操作.存储的是对的映射,允许多个null值和一个null键.但此类不保证映射的顺序,特别是它不保证该顺序恒久不变. 除了HashMap是非同步以及允许使用null外,HashMap 类与 Hashtable大致相同. 此实现假定哈希函数将元素适当地分布在各桶之间,可为基本操作(get 和 put)提供稳定的性

  • jquery下div 的resize事件示例代码

    这是某位大神写的jquery下div 的resize事件. 复制代码 代码如下: //resize of div (function($, h, c) { var a = $([]), e = $.resize = $.extend($.resize, {}), i, k = "setTimeout", j = "resize", d = j + "-special-event", b = "delay", f = "

  • Java并发系列之ConcurrentHashMap源码分析

    我们知道哈希表是一种非常高效的数据结构,设计优良的哈希函数可以使其上的增删改查操作达到O(1)级别.Java为我们提供了一个现成的哈希结构,那就是HashMap类,在前面的文章中我曾经介绍过HashMap类,知道它的所有方法都未进行同步,因此在多线程环境中是不安全的.为此,Java为我们提供了另外一个HashTable类,它对于多线程同步的处理非常简单粗暴,那就是在HashMap的基础上对其所有方法都使用synchronized关键字进行加锁.这种方法虽然简单,但导致了一个问题,那就是在同一时间

  • java对图片进行压缩和resize缩放的方法

    序 这里展示一下如何对图片进行压缩和resize.分享给大家,具体如下: 压缩 public static boolean compress(String src,String to, float quality) { boolean rs = true; // Build param JPEGEncodeParam param = null; // Build encoder File destination = new File(to); FileOutputStream os = null

随机推荐