美文网首页
解决Element Plus ResizeObserve问题

解决Element Plus ResizeObserve问题

作者: 寻找无名的特质 | 来源:发表于2023-10-21 05:31 被阅读0次

    当使用Element Plus 时,遇到ResizeObserve出现错误,主要是Tab组件和Table组件,在网上查了一下,发现是在Resize时,如果更新组件就有可能导致该问题,感觉是这些组件本身的设计问题,在网上查了一下,目前只能使用补丁去掉这个问题,但应该不是根治的办法。在App.vue中增加如下代码。

    <script>
    
    const debounce = (fn, delay) => {
      let timer = null; return function () { 
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        let context = this; 
        let args = arguments; 
        clearTimeout(timer); 
        timer = setTimeout(function () { fn.apply(context, args); }, delay); }
    }
    
    const _ResizeObserver = window.ResizeObserver;
    window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
      constructor(callback) { callback = debounce(callback, 16); super(callback); }
    }
    </script>
    

    后续:最后这个问题的解决了。使用vue官网推荐的创建项目模板,然后安装element plus,问题消失。vue create已经进入维护期,不推荐使用。

    相关文章

      网友评论

          本文标题:解决Element Plus ResizeObserve问题

          本文链接:https://www.haomeiwen.com/subject/zwjpmdtx.html