- 博客(57)
- 收藏
- 关注
RSS订阅原创 Vue3 Form 表单限制输入小写字母、数字和下划线
template><el-form-item label="用户名"><el-inputplaceholder="只能输入小写字母、数字和下划线"/></el-form>// 自定义指令// 触发v-model更新});});</script>
2025-05-20 10:41:19
183
原创 Vue3列表移除元素后索引更新方法
如果需要在移除后执行其他操作，可以使用 watch 或 watchEffect 监听列表变化。Vue 会自动更新 v-for 中的索引，所以通常不需要手动处理。避免直接使用索引作为 key，这可能导致渲染问题。
2025-05-20 10:35:02
293
原创 Vue3 Element Plus el-tabs数据刷新方法
会完全销毁和重建组件，适合数据完全独立的情况。适合需要保留组件状态但刷新数据的情况。对于简单场景，直接使用。
2025-04-27 18:04:10
481
原创 防抖（Debounce）和节流（Throttle）
节流是一种限制函数执行频率的技术。它的原理是，当事件被频繁触发时，函数会按照一定的时间间隔执行，而不是每次触发事件都执行。换句话说，在一个时间段内，只会执行一次事件处理函数。
2025-03-28 23:00:00
310
原创 await func().catch()和try{ func() }.catch()，两种写法，有什么区别
和是两种处理异步操作错误的常见写法，虽然它们的功能相似，但在使用场景和细节上有一些区别。
2025-03-21 21:45:00
393
原创 前端vue中div设置background图片铺满div
使用CSS中的background-size属性和background-image属性来实现将图片作为一个div的背景图并撑满屏幕的效果。使用background-size属性设置背景图片的大小。如果使用background-size:cover属性不行,尝试background-size:contain属性。
2025-03-14 21:15:00
305
原创 defineProps 的使用方法
如果你使用 TypeScript，可以通过泛型的方式定义。在 TypeScript 中，如果需要为。是只读的，不能在子组件中直接修改。返回的对象可以直接在模板中使用。是编译器宏，不需要显式导入。提供默认值，可以使用。
2025-03-07 16:32:28
472
原创 校验v-for中的form表单
点击新增会在增加一个from表单，点击删除即删除一个form。1、for 循环体 或者map里是不支持await。整体外层一个form，内层多个form组成。2、避免层层嵌套的回调校验。
2025-02-16 21:56:29
169
原创 vue3 + vite 实现版本更新检查（检测到版本更新时提醒用户刷新页面）
当一个页面很久没刷新，又突然点到页面。由于一些文件是因为动态加载的，当重新编译后（如前后端发版后），这些文件会发生变化，就会出现加载不到的情况。进而导致正在使用的用户，点击页面发现加载不顺畅、卡顿问题。
2025-01-11 16:44:57
651
原创 ＞＞＞、/deep/、::v-deep、::v-deep()和:deep()的区别与用法
>>是CSS原生中的深度选择器语法，用于穿透样式封装。**兼容性：**仅在某些特定环境（如Webpack的css-loader配置中）和原生CSS中有效，Vue单文件组件中通常需要特定配置才能使用。**注意：**在Vue单文件组件中，我们通常会搭配css预处理器使用。但Sass之类的预处理器无法正确解析>>>，所以不推荐使用>>>，可以使用/deep/或::v-deep操作符取而代之，两者都是>>>的别名，同样可以正常工作。/deep/曾经是CSS中实际提出的新增功能，但之后被删除，所以。
2025-01-05 12:34:13
520
原创 关于window.open 被浏览器拦截解决方案
直接绑定到用户事件回调是最简单的方式，但局限性较大，无法适应复杂的异步场景。先打开空白窗口后填充 URL可以解决拦截问题，但用户体验不佳。最优方案是通过提示用户手动跳转或检测的返回值并提供兜底策略，从而确保用户体验和业务逻辑的完整性。链接：https://juejin.cn/post/7414305106825019402。
2024-12-29 22:38:25
947
原创 处理错误的两种方式：try...catch 与 then...catch
适合于同步代码，能够捕获代码块中抛出的异常。then...catch：用于处理 Promise 的结果和错误，适合异步操作。结合 try...catch：提供了清晰的异步错误处理方式，增强了代码的可读性。原文链接：https://juejin.cn/post/7418133347543121939。
2024-12-20 21:15:00
658
原创 vue3中el-table 复选框设置为单选，且可通过选择行选中复选框
el-table中自带的复选框组件，可以多选，但是目前我们只想要让用户选中一个，变成单选。
2024-12-15 19:37:23
836
原创 vue项目中，多个页面做离开页面未保存的提醒（离开/关闭/刷新页面提示未保存）
注：因为获取数据时接口返回的数据可能和离开页面前的数据结构不一致，可在copy数据时进行处理，也可在beforeRouteLeave.js中去单独比较这个页面的新旧数据。原文链接：https://blog.csdn.net/weixin_41746338/article/details/121203490。混入是可以进行全局注册的，但一旦使用全局混入，它将影响每一个之后创建的 Vue 实例，在这里我们不需要全局引入。在获取数据和保存数据的方法中，获取数据和保存数据后对ruleFormCopy赋值。
2024-12-09 07:21:51
635
原创 基于Vue3+Element Plus 实现多表单校验
表单校验在日常的开发需求中是一种很常见的需求，通常在提交表单发起请求前校验用户输入是否符合规则，通常只需formRef.value.validate()即可校验，但是，例如一些多步骤表单、动态表单、以及不同的用户角色可能看到不同的表单内容，因此需要对每个角色所看到的内容进行适当的校验的多用户角色的表单，此时，我们就需要同时校验多个不同的表单。
2024-12-01 21:24:21
679
原创 Vue 路由模式深度解析：Hash 、 History
通过使用 history.pushState() 和 replaceState() 这两个 API，我们可以在不重新加载页面的情况下修改浏览器的历史记录栈，从而改变当前地址栏的 URL。一个显著的特点是，在 Hash 模式下，页面的切换不会导致完整页面的重新加载。仅仅通过改变 URL 中的 Hash 部分，前端可以实现页面内容的动态更新，这有助于提供更流畅的用户体验，特别适用于单页面应用（SPA）。通过监听 hashchange 事件，我们可以捕获到 URL 的 Hash 部分的变化。
2024-11-25 22:00:00
2516
1
原创 vue-router的push和replace的区别
同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。router.go(0)//刷新。
2024-11-16 17:47:31
489
原创 监听路由的写法以及路由更新但是页面内容不更新的解决方案
3.router.go(0)刷新页面会触发组件初始化，组件初始化又会触发watch函数执行router.go(0)，并且触发路由发生变化执行router.go(0)，如此反复，便造成了页面一直刷新的情况。2.router.go(0)是刷新当前页面，如果设置immediate: true，组件初始化时执行一次router.go(0)，路由发生变化时又执行router.go(0)，4.不设置immediate: true，watch函数只会在路由发生变化时执行router.go(0)，不会一直刷新页面。
2024-11-10 20:51:03
217
原创 【vue3】实现el-tree组件，将不同层级的箭头修改成自定义图标
【代码】【vue3】实现el-tree组件，将不同层级的箭头修改成自定义图标。
2024-10-12 18:09:27
907
原创 vue使用eval() 方法的以及一些特殊的使用方式
其功能和JSON.parse()是相似的，但是当已经为通过JSON.parse()转换为对象后的JSON不能再调用该函数继续进行转换，这样会报错，但是eval()方法不会当传入字符串是对象使继续使用上述的方式，然会返回原对象。当eval中的字符串内是对象时加上括号则可以将原对象原样返回，如果将code2={a:2,b:3}时直接eval(code2)时会报错，加上括号就会将code2原样返回。执行动态创建的函数是可能的，但这通常不是推荐的做法，因为它可能导致代码难以维护和理解。时，它返回的是局部变量。
2024-09-22 20:08:48
1290
原创 vue3 表单校验规则封装
/ 非空验证message: '此项为必填项',!value,},// 最大长度验证message: `输入内容长度不能超过${max}个字符`,}),// 最小长度验证message: `输入内容长度不能少于${min}个字符`,}),// 数值范围验证message: `输入值必须在${min}和${max}之间`,}),// 正则表达式验证message: '输入格式不正确',}),// 验证两次输入是否一致message: '两次输入不一致',}),
2024-09-17 21:49:00
590
原创 vue3判断elementui中el-form是否更新变化，变化就提示是否保存，没变就直接离开
需求是：如果用户在表单中输入了内容，但是没有点击保存，而突然想离开这个页面了，就要提示询问是否保存，这个时候就要判断表单内容是否发生变化，并做相应的逻辑控制。
2024-09-08 19:27:02
1016
原创 elementplus 树表格只展开第一级下所有节点
这个属性允许指定哪些节点在组件加载时应该默认展开。通过遍历树数据，你可以获取每个节点的ID，并将这些ID添加到。在Element Plus中，若要实现树形表格只展开第一级下的所有节点，可以通过使用。通过遍历这个数组，找到所有顶级节点的ID，并将它们添加到。数组中，从而控制哪些节点在初始化时是展开的。
2024-08-25 19:26:59
767
1
原创 关于element导航菜单，展开一个菜单项，其余也都打开的问题
使用element导航菜单时，使用v-for循环出来的每一项，打开一个菜单项时发现其他项也都打开了，是因为<el-menu>标签是根据index来定位展开还是关闭的，而使用v-for循环使得每一项的index都是一样的，所以才会一个打开都打开。
2024-07-26 17:06:23
631
原创 图片懒加载
图片的加载包含了图片的请求和渲染比方说当我们开发一个有很多图片的长网页时，一般先加载出现在视口内的几张图片，当滚动条滚动到相应图片的位置时再去加载别的图片。
2024-07-12 17:19:54
226
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人