前后端知识交流分享

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

2019-05-31  本文已影响0人  Trytodo_zbs

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

上一篇下一篇

猜你喜欢

热点阅读