项目实战bug修复

news2024/11/14 7:19:22

实操bug修复记录

    • 左侧侧边栏切换,再次切换侧边栏,右侧未从顶部初始位置展示。
    • 地图定位展示,可跳转到设置的对应位置。
    • 一个页面多个el-dialog弹出框导致渲染层级出现问题。
    • 锚点滚动定位错位问题。
    • 动态类名绑定。
    • el-tree树形通过 draggable 属性可让节点变为可拖拽,如果保存数据持久化为推拽之后的结果

左侧侧边栏切换,再次切换侧边栏,右侧未从顶部初始位置展示。

分析:右侧内容超出一屏可视区域后出现滚动条,切换左侧tab的时候,右侧滚动条不能正确归位。
​​在这里插入图片描述
this.$nextTick方法作用如下:

  • 确保DOM更新完成:
  1. 在 Vue 中,当数据发生变化时,Vue 会异步更新 DOM。这意味着数据变化后立即操 作 DOM 可能会得到旧的 DOM 结构。
  2. this.$nextTick 保证了在回调函数执行时,DOM 已经完成了更新。
  • 异步回调
  1. this.$nextTick(callback) 接受一个回调函数作为参数,在 DOM 更新完成后执行该回调。
  2. 这样可以确保在数据变化后进行的 DOM 操作是基于最新的状态。

地图定位展示,可跳转到设置的对应位置。

一个页面多个el-dialog弹出框导致渲染层级出现问题。

分析:

  • z-index 问题: 多个 el-dialog 使用相同的 z-index 值,导致层叠顺序混乱。 不同的 el-dialog可能覆盖彼此,无法正确显示。
  • 全局样式冲突: element-plus 或其他 UI 库的全局样式可能相互影响,导致层叠问题。
  • 动态渲染问题: 如果 el-dialog 是动态创建和销毁的,可能会有 DOM 渲染顺序问题。
    1.调整 Z-index,可以通过手动调整 z-index 来解决层叠问题
    在这里插入图片描述
    2.使用命名空间,为每个 el-dialog 添加命名空间,以避免样式冲突:
    在这里插入图片描述
    3.使用Element组件中的嵌套的 Dialog。
    ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0ebdef88cec845e58c3d272bf00bd940.png

锚点滚动定位错位问题。

分析:动态获取某个区域的高度,以便进行一些布局或滚动相关的计算。
在这里插入图片描述

动态类名绑定。

分析:根据条件动态设置类名和样式展示。
在这里插入图片描述
在这里插入图片描述

el-tree树形通过 draggable 属性可让节点变为可拖拽,如果保存数据持久化为推拽之后的结果

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2161842.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux 进程与进程状态

目录 1.进程。 1.进程的概念 2.并行和并发 3.并行和并发的区别: 4.PCB(程序控制块) 5.进程组与会话。 6.进程状态。 1.进程。 1.进程的概念 进程是操作系统进行资源分配和调度的一个独立单位。每个进程都运行在操作系统的控制之下&…

游戏化在电子课程中的作用:提高参与度和学习成果

游戏化,即游戏设计元素在非游戏环境中的应用,已成为电子学习领域的强大工具。通过将积分、徽章、排行榜和挑战等游戏机制整合到教育内容中,电子课程可以变得更具吸引力、激励性和有效性。以下是游戏化如何在转变电子学习中发挥重要作用&#…

git命令将已经commit的代码push到其他分支

文章目录 一:对于多分支的代码库,将提交记录从一个分支转移到另一个分支是常见需求方法1:撤销commit操作方法2:实用命令git cherry-pick 来移动commit 二、不小心revert导致代码消失的问题 一:对于多分支的代码库&…

U8集成网页开发的数据查询(二)

前言 根据上一篇的开发,最近又做了一些单据查询的开发。 效果展示图片 结语 目前网页查询已经完善功能: 1.与U8的账号密码保持一致,定时从U8同步账号密码。 2.角色管理,权限分配。 3.U8基础档案数据查询(示例&#…

828华为云征文 | 解锁企业级邮件服务,在华为云Flexus x实例上部署Mailcow开源方案

前言 华为云Flexus X实例携手Mailcow开源邮件方案,为企业打造了一个既高效又安全的邮件服务解决方案。Flexus X实例的柔性算力与高性能,是这一方案的坚实基石。它提供CPU内存的灵活定义,以经济型价格实现旗舰级性能,确保邮件服务的…

实例讲解电动汽车故障分级处理策略及Simulink建模方法

电动汽车的故障有很多种,每种故障发生时产生危害性是不同的,因此对于不同故障应采取不同的处理方式。目前一般有两种故障处理方式,一种是针对每一种故障对其故障危害性进行判断,然后针对不同故障设定不同的故障处理机制&#xff1…

day-59 四数之和

思路 双指针&#xff1a;类似16. 最接近的三数之和&#xff0c;将数组排序后&#xff0c;只需要枚举第一个数&#xff0c;则会变为与第16题相似的解题思路 解题过程 枚举选取的第一个数&#xff0c;0<i<len-3,然后就是第16题的解题思路 Code class Solution {public L…

【Linux实践】实验三:LINUX系统的文件操作命令

【Linux实践】实验三&#xff1a;LINUX系统的文件操作命令 实验目的实验内容实验步骤及结果1. 切换和查看目录2. 显示目录下的文件3. 创建和删除目录① mkdir② rm③ rmdir 4. 输出和重定向① 输出② 重定向 > 和 >> 5. 查看文件内容① cat② head 6. 权限7. 复制8. 排…

Kali nmap扫描

物理机 ipconfig 扫描物理机 nmap 192.168.0.198 扫描物理机所有开放的端口&#xff08;TCP半开扫描 nmap -sS 192.168.0.198 扫描物理机所有开放的端口&#xff08;TCP全开扫描 nmap -sT 192.168.0.198 扫描物理机主机系统 nmap -O 192.168.0.198 扫描物理机所在网段所有…

C++ STL容器(三) —— 迭代器底层剖析

本篇聚焦于STL中的迭代器&#xff0c;同样基于MSVC源码。 文章目录 迭代器模式应用场景实现方式优缺点 UML类图代码解析list 迭代器const 迭代器非 const 迭代器 vector 迭代器const 迭代器非const迭代器 反向迭代器 迭代器失效参考资料 迭代器模式 首先迭代器模式是设计模式中…

YOLOv8——测量高速公路上汽车的速度

引言 在人工神经网络和计算机视觉领域&#xff0c;目标识别和跟踪是非常重要的技术&#xff0c;它们可以应用于无数的项目中&#xff0c;其中许多可能不是很明显&#xff0c;比如使用这些算法来测量距离或对象的速度。 测量汽车速度基本步骤如下&#xff1a; 视频采集&#x…

江协科技STM32学习- P18 实验-PWM输入捕获测频率PWMI输入捕获模式测频率和占空比

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

分布式光伏的发电监控

国拥有丰富的清洁可再生能源资源储量&#xff0c;积极开发利用可再生能源&#xff0c;为解决当前化石能源短缺与环境污染严重的燃眉之急提供了有效途径[1]。但是可再生能源的利用和开发&#xff0c;可再生能源技术的发展和推广以及可再生能源资源对环境保护的正向影响&#xff…

Qt窗口——QMenuBar

文章目录 QMenuBar示例演示给菜单栏设置快捷键给菜单项设置快捷键添加子菜单添加分割线添加图标 QMenuBar Qt中采用QMenuBar来创建菜单栏&#xff0c;一个主窗口&#xff0c;只允许有一个菜单栏&#xff0c;位于主窗口的顶部、主窗口标题栏下面&#xff1b;一个菜单栏里面有多…

计算机毕业设计之:基于微信小程序的电费缴费系统(源码+文档+讲解)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

鸿蒙OpenHarmony【小型系统基础内核(进程管理调度器)】子系统开发

调度器 基本概念 OpenHarmony LiteOS-A内核采用了高优先级优先 同优先级时间片轮转的抢占式调度机制&#xff0c;系统从启动开始基于real time的时间轴向前运行&#xff0c;使得该调度算法具有很好的实时性。 OpenHarmony 的调度算法将 tickless 机制天然嵌入到调度算法中&…

gRPC介绍

gRPC 是一个由谷歌开发的现代开源高性能 RPC 远程过程调用&#xff08; Remote Procedure Calls&#xff09;框架&#xff0c;具备良好的兼容性&#xff0c;可在多个开发环境下运行。 相较于目前主流的 HTTP API 接口&#xff0c;gRPC 接口采用了领先的 HTTP/2 底层架构设计作…

input文本框随其中内容而变化长

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>input文本框随其中内容而变化长</title><style>.input-length {border: 1px solid #ccc;padding: 5px;min-width: 10px;width: auto;}.in…

cobbler自动批量安装多版本操作系统

本次虚拟化环境为VMware Workstation Pro&#xff0c;cobbler服务端为CentOS7.9&#xff0c;需要自动安装的版本为CentOS7.9和CentOS8.1 目录 一、安装cobbler服务端1、修改YUM源2、关闭防火墙3、安装软件包4、cobbler环境配置5、解决语法问题6、启动服务7、导入镜像8、自定义…

828华为云征文|华为云Flexus X实例:极速搭建个人代码仓库GitLab平台

目录 前言 一、Flexus云服务器X介绍 1.1 Flexus云服务器X实例简介 1.2 Flexus云服务器X实例特点 1.3 Flexus云服务器X实例使用场景 二、Flexus云服务器X购买 2.1 Flexus X实例购买 2.2 重置密码 2.3 登录服务器 三、Flexus X 实例安装GitLab 3.1 GitLab镜像下载 3.2 GitLab部署…