当前位置: 首页 > news >正文

【前端】记录各种控制台警告/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的根节点可能不是这样的元素。

确认组件的根节点是否为一个有效的 DOM 元素

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文件中添加:

  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中添加以下代码:

// 解决 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);

相关文章:

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

一、Element Plus 1、控制台警告&#xff1a;“Runtime directive used on component with non-element root node. The directives will not function as intended.” 错误原因&#xff1a;在 Vue 组件上使用了运行时指令&#xff08;指那些在运行时动态绑定到 DOM 元素上的指…...

猫咪掉毛严重怎么办?铲屎官家庭必备清理工具——宠物空气净化器

“毛&#xff0c;毛&#xff0c;毛&#xff0c;还是毛&#xff01;”铲屎官们每天都离不开和猫毛斗智斗勇&#xff0c;家里的每个角落都成了“战场”&#xff0c;掉毛的严重程度超乎想象。有时也在后悔当初怎么不养只无毛猫&#xff0c;而是把毛孩子接了回来&#xff0c;世上没…...

顺序表的实现——数据结构

线性表 文章目录 线性表线性表的定义和基本操作线性表的定义线性表的基本操作 线性表的顺序表示顺序表的定义顺序表的实现——静态分配顺序表的实现——动态分配顺序表的特点 线性表的定义和基本操作 线性表的定义 线性表&#xff08;Linear List&#xff09;的定义 ​ 线性…...

【模块化】CommonJS,AMD规范,CMD规范,ES6模块化

1. CommonJS Node.js基于CommonJS规范应运而生 1.1 commonjs规范语法导出模块 module.exports { a, b }1.2 commonjs规范语法引入模块 const mod require(./导出模块name)2. AMD 规范 RequireJS 是AMD规范的实现。是js文件和模块的加载器。 在没有单页应用&#xff08;angu…...

3.js - 顶点着色器、片元着色器的联系

1、定义与功能 顶点着色器 顶点着色器&#xff0c;是图形渲染管线中的第一个可编程阶段&#xff0c;它的主要任务是&#xff0c;处理从CPU发送到GPU的顶点数据&#xff0c;包括&#xff1a;1、顶点位置的变换&#xff08;如&#xff1a;模型空间 -> 世界空间 -> 视图控件…...

kotlin简介

Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言&#xff0c;被称之为 Android 世界的Swift&#xff0c;由 JetBrains 设计开发并开源。 Kotlin 可以编译成Java字节码&#xff0c;也可以编译成 JavaScript&#xff0c;方便在没有 JVM 的设备上运行。 在Google I/O 2017…...

Mintegral出海系列:解锁全球应用商店新增长路径

在全球化竞争的浪潮中&#xff0c;面对打法各异的应用和游戏品类&#xff0c;以及全球数百个环境不同的国家和地区&#xff0c;开发者们正面临着前所未有的挑战。Mintegral「出海ing」系列专题内容&#xff0c;助力出海开发者选准赛道探索新的增长路径。 据近期数据显示&#x…...

Qt 哈希加密之 QCryptographicHash

【写在前面】 QCryptographicHash 是 Qt 框架中提供的一个类&#xff0c;它用于实现加密散列函数&#xff0c;也就是我们常说的哈希函数。哈希函数能够将任意长度的数据转换为固定长度的哈希值&#xff0c;这个哈希值通常用于数据的完整性校验、密码存储等场景。 什么是哈希函数…...

渗透第二次作业

目录 简述rce漏洞 可能产生rce漏洞的函数 RCE代码执行漏洞示例 贷齐乐系统多处SQL注入漏洞 ​编辑 爆出库名 爆出表名 爆出表下的列名 查flag数据 简述rce漏洞 ​ rce漏洞&#xff0c;即远程代码执行和远程命令执行漏洞。这种漏洞允许攻击者在后台服务器上远程注入操作…...

42.【C语言】冒泡排序

目录&#xff1a; 冒泡排序 *核心思想 *分析 *代码 *优化 15.冒泡排序(bubble sort) *核心思想&#xff1a;两两相邻的元素进行比较&#xff0c;满足条件则两者交换 *分析 现要求升序排序 输入: 9 8 7 6 5 4 3 2 1 0 输出&#xff1a;0 1 2 3 4 5 6 7 8 9 下面展示一趟冒泡排…...

Linux安全与高级应用(七)深入Linux Shell脚本编程:循环与分支结构的高级应用

文章目录 深入Linux Shell脚本编程&#xff1a;循环与分支结构的高级应用一、循环结构详解1. for循环1.1 应用示例&#xff1a;检查主机状态 2. while循环2.1 应用示例&#xff1a;猜价格游戏 二、分支结构详解1. if语句1.1 单分支结构1.2 双分支结构1.3 多分支结构 2. case语句…...

python爬虫滑块验证及各种加密函数(基于ddddocr进行的一层封装)

git链接: https://github.com/JOUUUSKA/spider_toolsbox 这里写目录标题 一.识别验证码1、识别英文&#xff0b;数字验证码2、识别滑块验证码3、识别点选验证码 一.识别验证码 git链接: https://github.com/JOUUUSKA/spider_toolsbox 创作不易记得stars 1、识别英文&#xf…...

pytorch学习一(扩展篇):miniconda下载、安装、配置环境变量。miniconda创建多版本python环境。整理常用命令(亲测ok)

文章目录 前言一、miniconda和anaconda的关系1、Anaconda2、Miniconda3、总结 二、下载miniconda&#xff08;清华镜像链接&#xff09;三、安装miniconda1、安装2、或许要手动加载 ~/.bashrc 四、配置 命令1、查看anaconda安装博文2、取消默认进入conda&#xff08;base&#…...

说一下Android中的IdleHandler

IdleHandler 是 Android 中的一个接口&#xff0c;常用于在主线程空闲时执行一些低优先级的任务。 作用&#xff1a; 它提供了一种在主线程空闲时执行额外操作的机制&#xff0c;能够优化应用的性能和资源利用。 工作原理&#xff1a; 当主线程没有其他任务需要处理&#xff…...

Flake8 和 Autopep8 使用指南

Flake8 和 Autopep8 集成到 CI/CD 流程中&#xff0c;确保在代码提交和合并时自动进行检查和格式化&#xff0c;如果Autopep8格式化检查无法通过Flake8校验&#xff0c;说明pycodestyle版本依赖不兼容&#xff0c;参考文章&#xff1a;Flake8 与 Autopep8 兼容性指南 Flake8 使…...

OpenHarmony(数据)通信协议、数据存储—protobuf

介绍 ProtoBuf(protocol buffers) 是一种语言无关、平台无关、可扩展的序列化结构数据的方法&#xff0c;它可用于&#xff08;数据&#xff09;通信协议、数据存储等。,是一种灵活&#xff0c;高效&#xff0c;自动化机制的结构数据序列化方法比XML更小,更快,更为简单。 本项…...

vue3 依赖注入 vueRouter vuex

目录 01 依赖注入 02 组合式API里面的vueRouter 03 组合式API中的vuex的使用 01 依赖注入 使用场景&#xff1a; 有一个父组件&#xff0c;里头有子组件&#xff0c;有孙组件&#xff0c;有很多后代组件&#xff0c;共享父组件数据。 1.组先组件给后代组件传参 组先组件: 从…...

在Windows上用Visual Studio编译OpenCV

在Windows上编译开源项目&#xff0c;有时候让人痛不欲生&#xff0c;有时候却出奇地顺利。OpenCV属于后者。本文记录这次愉快的过程。 注&#xff1a;OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库。它提供了大…...

详解2024年最值得推荐的5款CRM软件:如何选择适合企业需求的CRM系统?

在文章开始之前&#xff0c;我们前来了解下&#xff1a;什么是CRM系统&#xff1f; CRM系统&#xff0c;即客户关系管理系统&#xff0c;顾名思义&#xff0c;它是企业用来管理和维护与客户之间关系的重要工具。通过CRM系统&#xff0c;企业能够全面了解客户需求&#xff0c;优…...

2024靠谱的网站建设公司推荐

在现在的互联网社会&#xff0c;一个企业的网站往往是潜在客户对该品牌的第一印象来源。也正因如此&#xff0c;选择一个靠谱的网站建设公司对于确保企业在线形象和功能性至关重要&#xff0c;作为建站行业从业人员&#xff0c;我分享几个选择网站建设公司时应考虑的几个关键因…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...