<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[leader_li的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/leader_li</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; leader_li]]></copyright><item><title><![CDATA[下载海康视频插件后，浏览器显示此站点正在尝试打开webcontrol浏览器中间件]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/155987501</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/155987501</guid><author>leader_li</author><pubDate>Tue, 16 Dec 2025 18:51:51 +0800</pubDate><description><![CDATA[摘要：解决海康威视视频插件安装后仍无法显示监控的问题，需在浏览器设置中将插件地址设为安全来源。具体步骤：1.复制弹窗中的插件地址；2.在浏览器flags页面搜索并启用&quot;Insecure origins treated as secure&quot;选项；3.粘贴地址并重启浏览器；4.刷新页面后允许本地网络访问权限即可正常显示视频。该操作适用于Chrome、Edge等主流浏览器。]]></description><category></category></item><item><title><![CDATA[【ECharts】统计图在来回切换标签页或调整浏览器分辨率后变形或消失]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/149568498</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/149568498</guid><author>leader_li</author><pubDate>Wed, 23 Jul 2025 15:55:16 +0800</pubDate><description><![CDATA[ECharts图表在切换标签页或调整分辨率后可能出现显示异常问题。本文提供Vue3解决方案：在onActivated钩子中调用resize()方法刷新图表，并添加防抖的窗口resize监听。同时建议使用nextTick确保DOM更新完成，以及通过setOption的第二个参数true清除旧数据残留。文中还提供了Vue2版本的实现参考链接，以及处理多数据源残留问题的相关文章指引。]]></description><category></category></item><item><title><![CDATA[【Naive-UI】使用 n-tabs 遇到的问题]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/149442692</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/149442692</guid><author>leader_li</author><pubDate>Mon, 21 Jul 2025 10:03:26 +0800</pubDate><description><![CDATA[n-tabs标签页中display-directive属性的用法及注意事项。该属性有三个可选值：'if'（默认）、'show'和'show:lazy'，分别对应不同的页面加载和显示方式。文章详细分析了三种模式的差异，并针对常见问题提供了解决方案：1）页面数据刷新问题可通过改用show/show:lazy解决；2）ECharts图表显示问题建议使用show:lazy模式；3）路由加载页面时多次执行onMounted()的问题可通过调整router-view位置并修改页面样式。]]></description><category></category></item><item><title><![CDATA[【Naive-UI】点击按钮自动获取选择器焦点]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/147428209</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/147428209</guid><author>leader_li</author><pubDate>Tue, 22 Apr 2025 19:19:37 +0800</pubDate><description><![CDATA[本文介绍了两种在Naive UI中使用NSelect组件获取焦点的方法。第一种是使用n-select标签，需添加show-on-focus属性并通过ref调用focus()方法；第二种是使用h(NSelect)渲染函数，注意ref参数需直接传递变量而非字符串或.value值。两种方法都演示了如何通过按钮触发获取焦点并展开下拉菜单的操作。]]></description><category></category></item><item><title><![CDATA[【Javascript】贪吃蛇游戏代码]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/147414354</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/147414354</guid><author>leader_li</author><pubDate>Tue, 22 Apr 2025 12:20:44 +0800</pubDate><description><![CDATA[贪吃蛇游戏说明 本游戏提供普通版和特殊版两种模式： 普通版碰到蛇尾会结束游戏，特殊版无此限制 游戏速度固定，没有等级变化 支持自定义修改，包括： 游戏速度（修改第257行的数值） 过关分数（修改第175行的666） 游戏外观：可自定义背景、地图边框、蛇身/蛇头/食物的颜色 地图大小调整（需保持10的倍数关系） 游戏采用JavaScript实现，包含基本的键盘控制逻辑，支持方向键操作]]></description><category></category></item><item><title><![CDATA[【Echarts】统计图刷新数据后，上次的数据还存在]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/147399851</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/147399851</guid><author>leader_li</author><pubDate>Mon, 21 Apr 2025 18:24:36 +0800</pubDate><description><![CDATA[摘要：在ECharts图表开发中，当需要解决数据残留问题时，可以在setOption()方法中新增一个参数true。具体实现方式是在初始化图表实例并设置配置项后，调用chart.setOption(option, true)，其中的true参数能够有效清除上一次的残留数据，确保图表显示正确。这种方法简单直接，是处理ECharts数据残留问题的有效解决方案。]]></description><category></category></item><item><title><![CDATA[【Naive-UI】选择器失去焦点获取新创建的数据]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/147383505</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/147383505</guid><author>leader_li</author><pubDate>Mon, 21 Apr 2025 12:11:45 +0800</pubDate><description><![CDATA[本文介绍了如何优化Naive-UI选择器在创建新数据时的用户体验。当使用filterable和tag属性时，默认需要手动选择或回车确认新数据，否则会丢失输入。通过添加on-create事件，可以在失焦时自动保存新数据。示例展示了基本用法，并特别说明当options使用非默认字段(label/value)时，需配置label-field和value-field属性。最后演示了一个完整案例，包括自定义字段处理和选择值更新逻辑，确保新创建数据的正确存储和显示，解决了用户输入可能丢失的问题。]]></description><category></category></item><item><title><![CDATA[【Vue3】表格动态显示、隐藏列字段]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/145342815</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/145342815</guid><author>leader_li</author><pubDate>Fri, 24 Jan 2025 17:12:38 +0800</pubDate><description><![CDATA[本文介绍了如何使用 Naive-UI 的数据表格组件实现表格列的动态显示与隐藏功能。通过设置筛选弹窗控制表格列的显示状态，包含以下关键点：1) 使用复选框控制列字段的显示/隐藏；2) 实现特定列的禁用功能（如固定列）；3) 动态计算表格宽度适配不同列数；4) 通过深拷贝保持原始列配置。该方案提供了灵活的表列管理方式，适用于需要自定义显示字段的场景，代码结构清晰，易于扩展和维护。]]></description><category></category></item><item><title><![CDATA[【Vue3】前端导入、导出功能]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/145055976</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/145055976</guid><author>leader_li</author><pubDate>Fri, 10 Jan 2025 15:48:47 +0800</pubDate><description><![CDATA[本文展示了一个单表导入导出功能的Vue组件实现。组件包含导入Excel数据、下载导入模板和展示表格数据三大功能： 导入功能支持必填字段校验和日期类型处理 导出功能使用xlsx库生成Excel模板，支持单行/多行表头配置 表格展示使用Naive UI的n-data-table组件，支持嵌套表头结构 关键特性包括： 通过drColumns配置导入字段的必填属性和数据类型 支持父子结构的复杂表头导出 提供导入成功后的数据处理回调 导出时显示加载状态防止重复操作 代码结构清晰，包含完整的类型定义和注释说明。]]></description><category></category></item><item><title><![CDATA[【Vue3】根据录入时间计算持续时间（天、小时、秒）]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/144558306</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/144558306</guid><author>leader_li</author><pubDate>Thu, 19 Dec 2024 10:47:12 +0800</pubDate><description><![CDATA[本文展示了如何在Vue3+Naive-UI中实现数据表格的持续时间计算功能。通过设置定时器每秒计算当前时间与录入时间的差值，并将毫秒转换为&quot;天小时分秒&quot;格式显示。关键点包括：使用onActivated/onDeactivated生命周期钩子管理定时器，数据格式化渲染，以及处理接口数据刷新时的定时器重置。对于Vue2项目，需要使用路由守卫替代生命周期方法。代码提供了完整的表格组件实现，包括数据定义、列配置和时间计算逻辑。]]></description><category></category></item><item><title><![CDATA[Blocked aria-hidden on an element because its descendant retained focus.]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/143576997</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/143576997</guid><author>leader_li</author><pubDate>Wed, 06 Nov 2024 20:33:30 +0800</pubDate><description><![CDATA[这个原因是【aria-hidden】属性问题，报错信息中有告诉了我们是哪个标签中存在这个属性（该图片已知有个类名【n-carousel__slide】），那我们就想办法找到这个标签（这个标签会有多个），然后去除该属性。2、找到【控制台报错的标签信息】（可以通过打印 console.log(this.$refs.xxRef) 找里面的属性是否【存在控制台报错的标签】）3、循环【报错标签数组】并打印每个对象，看是否与控制台报错标签一致，若一致去除【aria-hidden】属性；]]></description><category></category></item><item><title><![CDATA[【JavaScript】购物车商品判断是否全选，并计算选中商品的总价]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/139144338</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/139144338</guid><author>leader_li</author><pubDate>Thu, 23 May 2024 13:02:25 +0800</pubDate><description><![CDATA[摘要：本文介绍了利用数组方法实现购物车功能。使用arr.every()判断商品是否全部选中；通过arr.filter()筛选出被选中的商品；结合arr.reduce()计算选中商品的总价。代码示例展示了如何判断全选状态、过滤选中商品以及累加计算总金额，为电商购物车功能提供了简洁的实现方案。]]></description><category></category></item><item><title><![CDATA[Linux基础命令、快捷键以及Linux高阶技巧总结]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/139098559</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/139098559</guid><author>leader_li</author><pubDate>Tue, 21 May 2024 17:59:23 +0800</pubDate><description><![CDATA[Linux常用命令与技巧摘要 本文总结了Linux系统基础操作命令、文件权限管理、软件安装配置及网络设置等实用技巧。文中通过简明示例展示了各命令的典型用法，适合作为Linux日常操作的快速参考手册。]]></description><category></category></item><item><title><![CDATA[【JavaScript】Math函数常见用法]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/138087885</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/138087885</guid><author>leader_li</author><pubDate>Mon, 22 Apr 2024 18:53:59 +0800</pubDate><description><![CDATA[JavaScript 提供了多个数学方法：Math.random()生成0-1的随机数；Math.abs()取绝对值；Math.round()四舍五入；Math.ceil()向上取整；Math.floor()向下取整；Math.trunc()去除小数部分；Math.pow()计算幂次；Math.sqrt()求平方根；Math.PI返回圆周率。这些方法可用于数值计算和数据处理。]]></description><category></category></item><item><title><![CDATA[【JavaScript】toString() 用法，数字转二进制，数字转千位分隔符]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/137515411</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/137515411</guid><author>leader_li</author><pubDate>Mon, 08 Apr 2024 16:55:43 +0800</pubDate><description><![CDATA[JavaScript类型转换方法总结：1.基础类型转换：toString()可将数字、布尔值、字符串、日期对象和数组转为字符串，如123转为&quot;123&quot;，数组转为逗号分隔字符串。2.进制转换：数字可通过toString(2/8/16)转为二进制/八进制/十六进制字符串。3.数字格式化：toLocaleString()可将数字转为带千位分隔符的字符串格式，如123456789转为&quot;123,456,789&quot;。这些方法为数据展示和类型转换提供了便捷方式。]]></description><category></category></item><item><title><![CDATA[【JavaScript】超过16位的数字，后面的数字全为0]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/137504244</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/137504244</guid><author>leader_li</author><pubDate>Mon, 08 Apr 2024 13:05:07 +0800</pubDate><description><![CDATA[摘要： 在解决LeetCode数组加一问题时，使用parseInt或Number转换长数字会导致精度丢失（超过16位后变为0）。通过BigInt可正确处理大整数运算，但需注意写法规范（如BigInt(1)）。最终方案对比了直接数值转换和手动进位两种方法，验证了BigInt的可行性，并指出操作时需显式声明BigInt类型以避免报错。]]></description><category></category></item><item><title><![CDATA[Vue使用npm run build打包，上传dist文件后样式有误]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/136045478</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/136045478</guid><author>leader_li</author><pubDate>Mon, 05 Feb 2024 17:33:08 +0800</pubDate><description><![CDATA[摘要 在项目中遇到相关问题时，可以通过修改vue.config.js文件中的extract参数值为false来解决。具体操作截图显示需要调整配置项，该方案能有效处理当前遇到的构建问题。这一简单配置调整即可消除报错，确保项目正常运行。]]></description><category></category></item><item><title><![CDATA[Mysql查询近12个月的每月事件数量（group by分组后查询无数据补0）]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/134527981</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/134527981</guid><author>leader_li</author><pubDate>Tue, 21 Nov 2023 11:35:25 +0800</pubDate><description><![CDATA[SQL查询解决近12个月数据补全问题 通过SQL查询实现了按月统计近12个月的数据，并自动补全缺失月份为0。方法包含三个步骤： 直接查询现有数据并按月份分组统计 生成包含近12个月所有月份的临时表 通过左连接将实际数据与月份表关联，自动填充缺失月份为0 最终实现了完整显示近12个月每个月的统计数量，即使某些月份没有数据也会显示为0，解决了数据不连续的问题。]]></description><category></category></item><item><title><![CDATA[【Navicat设置触发器】MySQL自动生成UUID或有规则编码]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/134052344</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/134052344</guid><author>leader_li</author><pubDate>Thu, 26 Oct 2023 11:39:22 +0800</pubDate><description><![CDATA[本文介绍了MySQL中触发器的四种应用场景：1) 设置标准UUID；2) 生成不带&quot;-&quot;的UUID；3) 自动创建规则编码（格式为&quot;ZS_时间戳_序号&quot;）；4) SQL查询规则编码。每种方案都提供了完整的SQL代码示例，并附有相关截图说明实现效果。特别对规则编码触发器进行了详细说明，包括需要修改的字段名和表名等参数，可通过时间戳和自增序号组合生成唯一编码。这些触发器适用于需要自动生成唯一标识符或业务编码的数据库场景。]]></description><category></category></item><item><title><![CDATA[【Javascript】将字符串转为 if 条件+字符串多参数替换]]></title><link>https://blog.youkuaiyun.com/leader_li/article/details/133164663</link><guid>https://blog.youkuaiyun.com/leader_li/article/details/133164663</guid><author>leader_li</author><pubDate>Fri, 22 Sep 2023 12:37:03 +0800</pubDate><description><![CDATA[本文介绍了如何在JavaScript中处理条件字符串，并将其转换为可执行的if条件。首先，通过stringToif函数，将字符串中的and和or分别替换为&amp;&amp;和||，然后使用eval()将字符串转换为布尔值。接着，展示了如何直接在if条件中使用eval()来执行字符串中的逻辑表达式。最后，提供了替换字符串中多个参数的示例代码，展示了如何将and和or替换为相应的逻辑运算符。这些方法适用于需要动态处理逻辑表达式的场景。]]></description><category></category></item></channel></rss>