CHERISH.zz-优快云博客

原创【ECharts】统计图在来回切换标签页或调整浏览器分辨率后变形或消失

ECharts图表在切换标签页或调整分辨率后可能出现显示异常问题。本文提供Vue3解决方案：在onActivated钩子中调用resize()方法刷新图表，并添加防抖的窗口resize监听。同时建议使用nextTick确保DOM更新完成，以及通过setOption的第二个参数true清除旧数据残留。文中还提供了Vue2版本的实现参考链接，以及处理多数据源残留问题的相关文章指引。

2025-07-23 15:55:16 305

原创【Naive-UI】使用 n-tabs 遇到的问题

n-tabs标签页中display-directive属性的用法及注意事项。该属性有三个可选值：'if'（默认）、'show'和'show:lazy'，分别对应不同的页面加载和显示方式。文章详细分析了三种模式的差异，并针对常见问题提供了解决方案：1）页面数据刷新问题可通过改用show/show:lazy解决；2）ECharts图表显示问题建议使用show:lazy模式；3）路由加载页面时多次执行onMounted()的问题可通过调整router-view位置并修改页面样式。

2025-07-21 10:03:26 261

原创【Naive-UI】点击按钮自动获取选择器焦点

本文介绍了两种在Naive UI中使用NSelect组件获取焦点的方法。第一种是使用n-select标签，需添加show-on-focus属性并通过ref调用focus()方法；第二种是使用h(NSelect)渲染函数，注意ref参数需直接传递变量而非字符串或.value值。两种方法都演示了如何通过按钮触发获取焦点并展开下拉菜单的操作。

2025-04-22 19:19:37 203

原创【Javascript】贪吃蛇游戏代码

贪吃蛇游戏说明本游戏提供普通版和特殊版两种模式：普通版碰到蛇尾会结束游戏，特殊版无此限制游戏速度固定，没有等级变化支持自定义修改，包括：游戏速度（修改第257行的数值）过关分数（修改第175行的666）游戏外观：可自定义背景、地图边框、蛇身/蛇头/食物的颜色地图大小调整（需保持10的倍数关系）游戏采用JavaScript实现，包含基本的键盘控制逻辑，支持方向键操作

2025-04-22 12:20:44 364

原创【Echarts】统计图刷新数据后，上次的数据还存在

摘要：在ECharts图表开发中，当需要解决数据残留问题时，可以在setOption()方法中新增一个参数true。具体实现方式是在初始化图表实例并设置配置项后，调用chart.setOption(option, true)，其中的true参数能够有效清除上一次的残留数据，确保图表显示正确。这种方法简单直接，是处理ECharts数据残留问题的有效解决方案。

2025-04-21 18:24:36 356

原创【Naive-UI】选择器失去焦点获取新创建的数据

本文介绍了如何优化Naive-UI选择器在创建新数据时的用户体验。当使用filterable和tag属性时，默认需要手动选择或回车确认新数据，否则会丢失输入。通过添加on-create事件，可以在失焦时自动保存新数据。示例展示了基本用法，并特别说明当options使用非默认字段(label/value)时，需配置label-field和value-field属性。最后演示了一个完整案例，包括自定义字段处理和选择值更新逻辑，确保新创建数据的正确存储和显示，解决了用户输入可能丢失的问题。

2025-04-21 12:11:45 193

原创【Vue3】表格动态显示、隐藏列字段

本文介绍了如何使用 Naive-UI 的数据表格组件实现表格列的动态显示与隐藏功能。通过设置筛选弹窗控制表格列的显示状态，包含以下关键点：1) 使用复选框控制列字段的显示/隐藏；2) 实现特定列的禁用功能（如固定列）；3) 动态计算表格宽度适配不同列数；4) 通过深拷贝保持原始列配置。该方案提供了灵活的表列管理方式，适用于需要自定义显示字段的场景，代码结构清晰，易于扩展和维护。

2025-01-24 17:12:38 575

原创【Vue3】前端导入、导出功能

本文展示了一个单表导入导出功能的Vue组件实现。组件包含导入Excel数据、下载导入模板和展示表格数据三大功能：导入功能支持必填字段校验和日期类型处理导出功能使用xlsx库生成Excel模板，支持单行/多行表头配置表格展示使用Naive UI的n-data-table组件，支持嵌套表头结构关键特性包括：通过drColumns配置导入字段的必填属性和数据类型支持父子结构的复杂表头导出提供导入成功后的数据处理回调导出时显示加载状态防止重复操作代码结构清晰，包含完整的类型定义和注释说明。

2025-01-10 15:48:47 814

原创【Vue3】根据录入时间计算持续时间（天、小时、秒）

本文展示了如何在Vue3+Naive-UI中实现数据表格的持续时间计算功能。通过设置定时器每秒计算当前时间与录入时间的差值，并将毫秒转换为"天小时分秒"格式显示。关键点包括：使用onActivated/onDeactivated生命周期钩子管理定时器，数据格式化渲染，以及处理接口数据刷新时的定时器重置。对于Vue2项目，需要使用路由守卫替代生命周期方法。代码提供了完整的表格组件实现，包括数据定义、列配置和时间计算逻辑。

2024-12-19 10:47:12 324

原创 Blocked aria-hidden on an element because its descendant retained focus.

这个原因是【aria-hidden】属性问题，报错信息中有告诉了我们是哪个标签中存在这个属性（该图片已知有个类名【n-carousel__slide】），那我们就想办法找到这个标签（这个标签会有多个），然后去除该属性。2、找到【控制台报错的标签信息】（可以通过打印 console.log(this.$refs.xxRef) 找里面的属性是否【存在控制台报错的标签】）3、循环【报错标签数组】并打印每个对象，看是否与控制台报错标签一致，若一致去除【aria-hidden】属性；

2024-11-06 20:33:30 14828

原创【JavaScript】购物车商品判断是否全选，并计算选中商品的总价

摘要：本文介绍了利用数组方法实现购物车功能。使用arr.every()判断商品是否全部选中；通过arr.filter()筛选出被选中的商品；结合arr.reduce()计算选中商品的总价。代码示例展示了如何判断全选状态、过滤选中商品以及累加计算总金额，为电商购物车功能提供了简洁的实现方案。

2024-05-23 13:02:25 249

原创 Linux基础命令、快捷键以及Linux高阶技巧总结

Linux常用命令与技巧摘要本文总结了Linux系统基础操作命令、文件权限管理、软件安装配置及网络设置等实用技巧。文中通过简明示例展示了各命令的典型用法，适合作为Linux日常操作的快速参考手册。

2024-05-21 17:59:23 243

原创【JavaScript】Math函数常见用法

JavaScript 提供了多个数学方法：Math.random()生成0-1的随机数；Math.abs()取绝对值；Math.round()四舍五入；Math.ceil()向上取整；Math.floor()向下取整；Math.trunc()去除小数部分；Math.pow()计算幂次；Math.sqrt()求平方根；Math.PI返回圆周率。这些方法可用于数值计算和数据处理。

2024-04-22 18:53:59 165

原创【JavaScript】toString() 用法，数字转二进制，数字转千位分隔符

JavaScript类型转换方法总结：1.基础类型转换：toString()可将数字、布尔值、字符串、日期对象和数组转为字符串，如123转为"123"，数组转为逗号分隔字符串。2.进制转换：数字可通过toString(2/8/16)转为二进制/八进制/十六进制字符串。3.数字格式化：toLocaleString()可将数字转为带千位分隔符的字符串格式，如123456789转为"123,456,789"。这些方法为数据展示和类型转换提供了便捷方式。

2024-04-08 16:55:43 192

原创【JavaScript】超过16位的数字，后面的数字全为0

摘要：在解决LeetCode数组加一问题时，使用parseInt或Number转换长数字会导致精度丢失（超过16位后变为0）。通过BigInt可正确处理大整数运算，但需注意写法规范（如BigInt(1)）。最终方案对比了直接数值转换和手动进位两种方法，验证了BigInt的可行性，并指出操作时需显式声明BigInt类型以避免报错。

2024-04-08 13:05:07 533

原创 Vue使用npm run build打包，上传dist文件后样式有误

摘要在项目中遇到相关问题时，可以通过修改vue.config.js文件中的extract参数值为false来解决。具体操作截图显示需要调整配置项，该方案能有效处理当前遇到的构建问题。这一简单配置调整即可消除报错，确保项目正常运行。

2024-02-05 17:33:08 259

原创 Mysql查询近12个月的每月事件数量（group by分组后查询无数据补0）

SQL查询解决近12个月数据补全问题通过SQL查询实现了按月统计近12个月的数据，并自动补全缺失月份为0。方法包含三个步骤：直接查询现有数据并按月份分组统计生成包含近12个月所有月份的临时表通过左连接将实际数据与月份表关联，自动填充缺失月份为0 最终实现了完整显示近12个月每个月的统计数量，即使某些月份没有数据也会显示为0，解决了数据不连续的问题。

2023-11-21 11:35:25 496

原创【Navicat设置触发器】MySQL自动生成UUID或有规则编码

本文介绍了MySQL中触发器的四种应用场景：1) 设置标准UUID；2) 生成不带"-"的UUID；3) 自动创建规则编码（格式为"ZS_时间戳_序号"）；4) SQL查询规则编码。每种方案都提供了完整的SQL代码示例，并附有相关截图说明实现效果。特别对规则编码触发器进行了详细说明，包括需要修改的字段名和表名等参数，可通过时间戳和自增序号组合生成唯一编码。这些触发器适用于需要自动生成唯一标识符或业务编码的数据库场景。

2023-10-26 11:39:22 2128

原创【Javascript】将字符串转为 if 条件+字符串多参数替换

本文介绍了如何在JavaScript中处理条件字符串，并将其转换为可执行的if条件。首先，通过stringToif函数，将字符串中的and和or分别替换为&&和||，然后使用eval()将字符串转换为布尔值。接着，展示了如何直接在if条件中使用eval()来执行字符串中的逻辑表达式。最后，提供了替换字符串中多个参数的示例代码，展示了如何将and和or替换为相应的逻辑运算符。这些方法适用于需要动态处理逻辑表达式的场景。

2023-09-22 12:37:03 442

原创【Vue2】清除定时器后定时器仍在运行

在Vue2中使用定时器时，直接在destroyed或beforeDestroy生命周期中清除可能无效。正确做法是：在beforeRouteLeave导航守卫中清除定时器，在beforeRouteEnter中重新开启。需要注意：1) 清除前检查定时器是否存在；2) next()必须调用；3) 通过vm参数访问组件实例。这种方法能确保页面切换时定时器被正确管理。

2023-08-25 19:52:23 2118

原创 JavaScript合并单元格【解决只能根据单列进行合并的问题】

该合并单元格的方法无法整齐的规划表格。由于每列只能根据该列的重复值进行合并，看着比较混乱。需要根据其他列进行分割合并。

2023-03-09 17:53:32 1582

原创【Vue】轮播图(左右箭头、自动播放函数封装)

这篇文章介绍了如何使用Vue.js和自定义动画函数实现轮播图功能。主要内容包括：轮播图容器、图片列表和左右箭头按钮，使用Vue的事件绑定实现交互功能。引入animate.js动画函数库使用Vue.js管理轮播图状态封装了克隆图片、左右移动等功能实现了自动轮播和鼠标悬停暂停功能该实现考虑了多个轮播图共存的情况，封装了可复用的组件逻辑，并尝试通过节流阀解决快速点击问题。

2023-01-10 18:57:05 2249

原创【JavaScript】input提示弹出框

本文详细介绍了如何实现动态提示框功能，主要包含四个部分：1）通过CSS设计提示框样式，包括宽度自适应、定位和箭头方向控制；2）为需要提示的input元素添加ID或class标识；3）使用JavaScript为input添加鼠标事件，实现提示框的显示/隐藏功能；4）对于大量提示框的情况，建议将配置存储在数据表中，通过页面名称动态加载对应提示内容。文中提供了完整的代码实现，包括CSS样式定义、HTML结构示例和JavaScript事件处理函数，特别强调了浏览器兼容性问题和箭头方向的实现技巧。

2023-01-09 12:02:12 2257

原创 Vue生命周期

Vue实例生命周期解析 Vue实例的生命周期可分为三个阶段：初始化、运行和销毁。初始化包括创建前后(beforeCreate/created)和挂载前后(beforeMount/mounted)；运行阶段包含更新前后(beforeUpdate/updated)；销毁阶段包括销毁前后(beforeDestroy/destroyed)。实例化Vue前需引入Vue.js，可通过CDN方式引入。生命周期钩子函数可帮助我们控制实例创建、更新和销毁的过程。

2021-08-31 19:49:05 155

原创九九乘法表（Java，JavaScript）

这篇教程分析了使用双重for循环打印九九乘法表的方法。通过比较三种循环模型（方正、倒三角、正三角），指出九九乘法表适合使用正三角模型，即外层循环控制行数，内层循环从1到当前行数递增。文章提供了Java和JavaScript两种实现代码示例，均采用双重循环结构，外层循环控制行数（1到9），内层循环控制每行的表达式数量（1到当前行数），并通过制表符和换行符控制输出格式。关键点在于理解"外层循环每执行一次，内层循环全部执行"的机制，以及正三角模型中内层循环条件j<=i的关系。

2021-05-28 21:50:56 325 1

原创【JAVA】冒泡排序及优化

本文介绍了Java中冒泡排序的实现及优化方法。首先展示了一个基础的冒泡排序示例，通过双重循环对静态数组进行排序并输出结果。随后提出了优化方案，通过添加flag标志位来判断是否已完成排序，若某一轮未发生交换则提前终止循环，提高效率。文章详细解释了冒泡排序的原理：外层循环控制比较轮数，内层循环将最大值移动到数组末尾，每轮结束后比较范围缩小。优化后的算法能在数据有序时提前结束排序，减少不必要的比较操作。

2020-11-29 20:46:55 395 1

leader_li的博客