使用element-ui封装好的resize事件方法

element-ui框架还是封装了很多前端开发当中有用的方法的,如果不想自己写或者觉得自己写的细节上比别人要差一点可以提取相关文件出来直接使用

1.依赖文件

src/utils/resize-event.js
是的就这一个文件,没有其他的

2.具体使用看代码
//先引入
import { addResizeListener, removeResizeListener } from 'utils/resize-event';

export default {
  mounted(){
    //可以在mounted这个钩子里初始化事件
    addResizeListener(this.$el, this.resizeListener);
  },
  methods:{
    resizeListener(){
      //do something
    }
  },
  //生命周期结束时销毁事件
  destroyed() {
    if (this.resizeListener) removeResizeListener(this.$el, this.resizeListener);
  }
}

resize事件一般用于在浏览器窗口大小变化时对界面进行调整,这个过程比较需要注意防抖的的问题,该方法已经封装好了防抖方法,所以界面调整时整体感觉流畅

原生js只在window上有resize事件,html元素上的resize需要通过特别的方式自己去实现,具体怎么实现我这里就不写了,网上有现成的代码,我随便找了下就有

以上示例中对当前控件的el元素添加了resize事件,但是注意,最好不要在resize回调事件中修改当前el的大小,不然可能会造成无限循环的bug

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,862评论 1 11
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,799评论 1 32
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,018评论 1 45
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,114评论 0 3
  • 真自我的人做事追求自我至上,一切围绕着自己的目标和梦想去奋斗,不会收外界环境的左右。而假自我的人则会行动迟缓,思前...
    423429d90f38阅读 890评论 0 0