【前端】记录各种控制台警告/bug

一、Element Plus

1、控制台警告:"Runtime directive used on component with non-element root node. The directives will not function as intended."

错误原因:在 Vue 组件上使用了运行时指令(指那些在运行时动态绑定到 DOM 元素上的指令),但是该组件的根节点不是一个标准的 DOM 元素(例如 div 或 span)

原因:自定义指令不能放到组件上,而是要放到自有的元素上。

解决方法

1.找到报警告的位置, 确认组件的根节点是否为一个有效的 DOM 元素

2.运行时指令:v-loading、v-show、v-if...

3.如下图示例:el-dialog上不能使用自定义指令v-loading

Element UI 和 Element Plus 中的 el-dialog组件本身是一个封装好的组件,它有自己的内部结构和生命周期。当你尝试在 el-dialog 上使用 v-loading指令时,可能会遇到一些问题,主要是因为 v-loading 指令期望的是一个标准的 DOM 元素,而 el-dialog的根节点可能不是这样的元素。

2、Ignored: ResizeObserver loop limit exceeded

element-plus 使用el-table 在切换tab栏时报错:

原因:ResizeObserver不能处理所有的observations导致报错;

解决方法:

1.阻止table的重绘,给每个<el-table-column>设置固定的width,缺点是无法自适应宽度。

2.给每个<el-table-column>设置min-width

3.添加debounce()防抖方法,在App.vue文件中添加:

javascript 复制代码
  const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    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);
  }
}

4.给回调进行节流,在App.vue中添加以下代码:

javascript 复制代码
// 解决 ElTable 自动宽度导致的「ResizeObserver loop limit exceeded」问题
const fixElTableErr = (table) => {
    const oldResizeListener = table.methods.resizeListener;
    table.methods.resizeListener = function () {
        window.requestAnimationFrame(oldResizeListener.bind(this));
    };
};
// 在Vue.use之前执行此函数
fixElTableErr(Table);
相关推荐
挽淚几秒前
JavaScript 数组详解:从入门到精通
javascript
言兴2 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte5 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常7 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常8 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101812 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱13 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
Struggler28119 分钟前
Chrome插件开发
前端
前端 贾公子31 分钟前
Monorepo + vite 怎么热更新
前端
coding随想40 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript