js 在方法中调用 resize 方法

简介

先介绍一下 遇到的问题,在项目中 引入了 v-charts 进行绘图,但是 由于使用的 基于 vue 的单页面应用,在将菜单 隐藏或打开的时候,不能触发 window.resize 方法,导致 绘制的图形 发生了偏移,目前需要的步骤就是 在让 菜单 打开或者隐藏的时候,手动触发一次 resize 方法,让v-charts 图形 自适应。

介绍

在网上查找资料的时候,遇到了两种方法,

  • 直接调用 window.onresize() ,达到重绘界面。 但是我这没有效果

  • 在需要用到方法中:

    javascriptvar e = document.createEvent("Event");
    e.init("resize",true,true);
    window.disapatchEvent(e);
    

这两种方法,我在尝试了之后 都不好使,然后在前台页面测试的摸索中,通过控制台 手动输入这些指令,发现了一些不一样的指令(我用的时chrome 浏览器),和第二种方法差不多

     var e = document.createEvent("Event");
     e.initEvent("resize",true,true);
     window.disapatchEvent(e);

成功进行了 页面的重绘。 我也不明白是浏览器还是其他的什么原因,希望有大神给与解答。。。
由于引用的 vue 结合 element使用,没有 引用 jquery ,jQuery 有一个 trigger 方法 也可以达到重绘功能。

你可能感兴趣的:(js 在方法中调用 resize 方法)