- 博客(56)
- 收藏
- 关注
RSS订阅原创 VueDraggableResizable
VueDraggableResizable 是一个用于实现元素拖拽和调整大小功能的Vue组件，在低代码平台、可视化布局等场景中应用广泛。
2025-12-21 19:40:01
182
原创 JS文件批量下载并打包成ZIP的功能
如果JS文件来自不同源且没有CORS头，可能无法下载。：现代浏览器支持良好，IE需要polyfill。：点击"清空列表"按钮移除所有文件。：前端处理大量大文件时可能内存不足。：点击"打包下载ZIP"按钮。：输入JS文件的URL地址。：选择本地的JS文件。
2025-12-14 21:13:54
257
原创 循环多个表单进行表单校验
在 ElementUI 中，循环生成表单并进行校验的核心在于 动态绑定prop属性，让每个表单项都能与数据数组中的对应字段正确关联。
2025-12-07 23:10:15
890
原创 JavaScript 对象数组的方法
在JavaScript中，数组是常用的数据结构，特别是当数组的元素是对象时，我们经常需要对这样的数组进行各种操作。下面介绍一些常用的数组方法：假设我们有一个包含多个用户对象的数组，每个用户对象有id、name和age属性。
2025-11-23 21:46:09
312
原创 前端数据存储localStorage、sessionStorage 与 Cookie
Cookie 是为服务器端脚本设计的，主要用于在客户端存储少量会话或状态信息。生命周期通过Expires或Max-Age属性设置过期时间。如果没有设置，则为“会话Cookie”，在浏览器关闭时失效。与服务器的交互浏览器会自动在每次 HTTP 请求的Cookie请求头中携带所有符合条件的 Cookie。服务器通过Set-Cookie响应头来设置或更新客户端的 Cookie。安全相关属性HttpOnly： 防止 JavaScript 通过访问，有效防范 XSS 攻击。Secure。
2025-10-19 20:04:20
879
原创 使用el-table实现行内编辑功能
对于更复杂或需要高度复用的场景，可以封装一个自定义的编辑单元格组件，使编辑逻辑更加清晰和内聚。创建一个名为的组件，它根据外部传入的canEdit属性来决定是显示普通的文本内容，还是一个可交互的表单组件。示例组件 (<template>-- 非编辑模式下显示内容，鼠标悬停有提示 -->v-if="!isEditing"content="点击编辑"</div>-- 编辑模式下显示输入组件 --><componentv-else</div><script>props: {
2025-10-12 20:51:50
475
原创 CSS中的伪类和伪元素
伪类：用于选择处于特定状态的已有元素。例如：鼠标悬停时的状态、被点击后的状态、是第一个子元素等。语法：单冒号伪元素：用于选择并样式化元素的特定部分，或者创建不在文档树中的虚拟元素。例如：元素的第一行字母、在元素内容前后插入新内容等。语法：双冒号(CSS3 规范，但单冒号也兼容)理解并熟练运用伪类和伪元素，是编写现代、高效 CSS 的关键。它们让你能够：在不修改 HTML 结构的情况下，实现丰富的交互效果（伪类）。创建精致的视觉效果和布局，而无需添加无意义的冗余标签（伪元素）。
2025-09-29 08:55:50
323
原创 表格 表头增加悬浮提示内容
此方法利用 Vue 的插槽机制，在模板中自定义表头内容。在中使用或-- 自定义表头 -->-- 或 <template v-slot:header> -->">表头标签</span>content="这里是详细的提示文字">"></i>-- 表格单元格内容 -->
2025-09-21 22:28:29
1001
原创 通过Timeline实现导航名称高亮对应页面内容
我们要实现一个功能：当用户滚动页面时，根据当前显示的内容区域，对应的导航菜单项会高亮显示。这通常用于单页应用或长滚动页面，以提供更好的用户体验。监听页面的滚动事件，在滚动时判断当前哪个内容区块位于视口的特定位置（通常是顶部或中间）。每个内容区块应该有一个唯一的ID，与导航菜单中的链接的锚点对应。我们需要一个导航菜单，每个菜单项对应页面上的一个内容区块。根据当前显示的内容区块，高亮对应的导航菜单项。
2025-09-07 20:36:18
189
原创 实现单选、多选，以及点击行任意位置勾选
在单选模式下，在 CSS 中通过深度选择器将表头的复选框隐藏。变量控制当前是单选还是多选模式（1.单选，2.多选）。根据element ui 官方API。
2025-08-31 22:52:47
249
原创 在JavaScript中，比较两个数组是否有相同元素（交集）的常用方法
以上方法只适用于基本类型（数字、字符串等）。：考虑分块处理或 Web Worker 避免阻塞。：使用 Lodash 等库的深度比较函数。或深度比较（如Lodash的。的时间复杂度为 O(1)）
2025-08-24 22:22:14
433
原创 在 Element UI 的 el-table 中实现某行标红并显示删除线
用于覆盖 Element UI 默认样式。根据实际需求选择方法，通常推荐使用。自动适应固定列、多级表头等复杂场景。：在数据对象中添加标识属性（如。方式，能更好地控制整行样式。/* 深度选择器写法 */所有单元格文字带删除线。整行红色背景突出显示。
2025-08-17 20:34:44
384
原创 vue3中 getCurrentInstance
在vue2版本中，可以通过 this 来获取当前组件实例，但是在 vue3 setup 中是无法通过 this 获取组件实例对象。是在vue3中用于获取当前组件实例的内部 API，主要在组合式 API（Composition API）的setup()函数中使用。它可以访问组件的上下文、属性、插槽等。
2025-08-10 19:48:20
649
原创 前端异步任务处理总结
优先使用 async/await 替代回调嵌套。数据缓存（SWR/React Query）请求合并（GraphQL/BFF）：对长时间操作提供取消支持。：图片/脚本动态加载。
2025-08-03 18:58:21
311
原创 Element表格单元格类名动态设置
在 Element UI 的 组件中， 属性用于动态自定义表格单元格的 CSS 类名，通常用于根据数据条件设置样式。在 上绑定 属性，值为一个函数。该函数接收一个对象参数，返回字符串（类名）或数组（多个类名）。2. 函数参数说明函数格式：row: 当前行数据column: 当前列配置rowIndex: 行索引（从 0 开始）columnIndex: 列索引（从 0 开始）CSS 定义样式4. 高级用法返回多个类名结合列属性判断5. 注意事项
2025-07-27 20:05:10
678
原创 Vue 3 TypeScript 接口(Interface)使用
/ 用户信息接口id: number;age?: number;// 可选属性// 在组件中使用props: {// 使用接口定义props类型user: {type: Object as () => User, // 类型断言},// 简单类型},// 现在可以安全访问props.user的属性});// 待办事项接口id: number;setup() {// 使用接口定义响应式数据id: 1,title: '学习 Vue 3',]);
2025-07-13 21:30:16
947
原创 JavaScript中的Class类
JavaScript 的类提供了：更清晰、更结构化的面向对象编程方式简洁的继承语法（extends和super封装能力（私有字段和方法）静态成员支持Getter/Setter 访问器虽然类本质上是基于原型的语法糖，但它们显著提高了代码的可读性和可维护性。在现代 JavaScript 开发中，类已成为创建复杂对象和组织代码结构的标准方式。
2025-06-29 19:27:32
1150
原创 基于element plus封装可以模糊搜索的多选下拉选择
element plus 中Select 选择器提供利用筛选功能快速查找选项功能还提供了输入关键字以从远程服务器中查找数据基于以上进行封装。
2025-06-22 18:30:24
418
原创 Object.keys方法的使用
JavaScript的方法用于获取对象自身的所有可枚举属性键名，并以数组形式返回。obj目标对象。：由对象自身可枚举属性键名组成的。
2025-05-18 20:09:22
478
原创 使用vue3-seamless-scroll实现列表自动滚动播放
vue3-seamless-scroll组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动。
2025-05-11 20:09:31
3174
3
原创 vue3 - keepAlive缓存组件
在Vue 3中，组件用于缓存动态组件或路由组件的状态，避免重复渲染，提升性能。我们新建两个组件，在每一个组件里面写一个input，在默认情况下当组件切换的时候，数据会被清空，但是我们用keep-alive包起来之后，数据将会被缓存，切换的时候不会被清空。
2025-05-04 19:16:23
982
原创 防抖与节流的理解与应用
前端防抖（Debounce）和节流（Throttle）都是用于控制函数执行频率的技术，主要应用于优化高频事件（如滚动、输入、窗口调整等）的性能表现。：当事件被连续触发时，只有在事件停止触发后的指定时间间隔内没有再次触发，才会执行目标函数。搜索框输入联想（等待用户停止输入后再请求）窗口大小调整（等待调整结束后计算布局）表单验证（输入停止后再验证）效果：用户输入停止 500ms 后，才触发 console.log。：在指定时间间隔内，无论事件触发多少次，目标函数最多执行一次。
2025-04-20 21:39:32
430
原创 vue3动态路由
import.meta.glob动态的去拼接获取文件,把后台返回内容转换成() => import('xxxx')格式。要想实现vite+vue-router实现动态路由我们需要用到。出现404的话比如说你在路由表中维护了下面路由映射。我们可以新建一个permission.ts文件。去控制是否放行以及去哪个页面，但是在新版本的。之前我们使用导航守卫的时候需要一个参数。以下代码仅供参考，有很多需要完善的地方。官方文档中addRoute的使用。当我们添加一个主路由的时候。添加子路由也就是嵌套路由。
2025-04-13 22:34:02
872
原创 PDF预览-搜索并高亮文本
如果你需要更专业的处理，可以考虑使用其他库或工具，如pdf-lib进行更高级的文本操作。由于直接在canvas上操作比较复杂，一个简单的方法是在渲染前修改文本内容，使其包含包围高亮文本的HTML元素（如果你是在一个支持HTML渲染的环境中，如某些特定的浏览器或框架）。PDF.js 是一个通用的、基于Web的PDF阅读器，它允许你在网页上嵌入PDF文件，并提供基本的阅读功能。对于更复杂的需求，考虑使用专业的PDF处理库或深入研究PDF.js的渲染机制来实现更高级的功能。使用PDF.js加载PDF文档。
2025-04-06 21:13:41
1348
1
原创 PDF.js
用于加载 PDF 文档的核心函数。返回一个包含 PDF 文档信息的 PDFDocumentProxy 对象。代表整个 PDF 文档的代理对象，包含文档级别的操作方法。代表 PDF 文档中的单个页面的代理对象，包含与页面渲染、获取文本等相关的操作方法。表示页面渲染操作的对象，通常是通过调用 page.render() 方法返回的。表示页面的文本内容，包含每个字符的位置和样式信息。
2025-03-30 20:48:02
1238
原创 el-table表格toggleRowSelection方法选中无效
toggleRowSelection方法传入的row，都要从表格tableData里取值，类似tableData[0]这样，或者tableData.forEach中的item。开发中会有对表格中进行默认选中的功能，element-plus官方有一个选中示例，如下。如果需要通过接口加载完表格数据，再回显勾选，那还需要写在nextTick函数里边。如果我们新建一个row数据，发现就是勾选不上，延迟执行也不行。
2025-03-23 18:39:37
595
原创 ElementUI 表格中插入图片缩略图，鼠标悬停显示大图
中插入图片缩略图，通过鼠标悬停显示大图？方法1：直接在模板元素中插入。方法2：通过表格列属性格式化。
2025-03-16 22:17:02
655
原创 Vue3 中 Computed 用法
Computed 又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed 具有缓存性，当无关值变化时，不会引起 computed 声明值的变化。组合式 API 中使用 computed 时，需要先引入：import { computed } from "vue"。vue3 中 的 computed 的使用，由于 vue3 兼容 vue2 的选项式 API，所以可以直接使用 vue2 的写法，以下是 vue3 中 computed 的写法和 vue2 中的写法的对比。
2025-03-09 20:45:20
1592
1
原创 el-table 实现单选的两种写法
高亮式是利用 el-table 提供的 highlight-current-row 和 @current-change 来实现的。单选则是利用了 el-radio 放在表头并绑定行数据来实现的，甚至不需要书写任何的 method 方法。current-change 当表格的当前行发生变化的时候会触发该事件。highlight-current-row 是否要高亮当前行。
2025-03-02 20:53:31
390
原创 正则表达式
正则表达式（Regular Expression）是一种用于描述字符串模式的工具，在很多编程语言和文本处理工具中广泛应用，用于字符串的匹配、搜索、替换等操作。
2025-02-23 19:49:00
1022
原创 element plus实现el-table中拖拽
4.在setup()中编写拖拽的逻辑，创建一个Sortable的实例，将需要拖拽的元素给到Sortable实例，进行需要的配置，然后在拖拽结束的方法onEnd()中实现改变排序的逻辑。2.在使用的组件，引入sortablejs包含在vuedraggable。1.安装 vuedraggable。3.row-key 必须设置。
2025-02-16 19:44:25
845
1
原创 Vue3使用components组件
v-model是双向数据绑定，默认情况下，组件上的v-model使用modelValue作为prop和update:modelValue作为事件。Props是单向数据流，这样可以防止子组件意外变更父组件的状态，每当父组件发生变更，子组件所有Props都会刷新到最新值。一个userInfo属性，是一个对象，然后在组件中就可以通过props.xxx来使用这些属性。上面事件章节说的是父组件响应子组件的事件，也就是说是子组件调用父组件的方法。这里同样是v-on的缩写形式，这样就绑定了事件。
2025-01-19 20:34:05
1238
原创 npm、yarn 与 pnpm 的区别
虽然它作为一个较新的选手可能在生态系统支持和原生模块兼容性方面存在一些挑战，但对于那些寻求更高效、更快速的依赖管理工具的开发者而言，PNPM无疑是一个值得尝试的选择。尽管存在一些劣势，但NPM通过不断的更新和改进，成功解决了许多早期的问题，并继续为广大JavaScript开发者提供强大的依赖管理和包安装服务。1.NPM（Node Package Manager），作为默认的JavaScript应用包管理器，与Node.js一同安装，它是目前使用最广泛的包管理器，得益于其对大量包的强大支持。
2025-01-12 21:11:33
936
原创 Vue3中的生命周期
这些钩子函数的执行顺序与Vue2的版本相同，但是有所不同的是，在Vue3中，它们是使用ES6类定义的。需要注意的是，在 Vue 3 中，onBeforeUnmount 和 onUnmounted 钩子需要在 setup 函数中使用。需要注意的是，在 Vue 3 中，onBeforeUpdate 和 onUpdated 钩子需要在 setup 函数中使用。需要注意的是，在 Vue 3 中，onMounted 和 onBeforeMount 钩子需要在 setup 函数中使用。
2025-01-05 19:24:53
2219
原创 vue3路由
返回的是一个表示当前路由状态的对象，这个对象包含了如路径（path）、路由参数（params）、查询参数（query）等属性。当需要实现页面之间的跳转、导航栏的功能或者处理路由相关的操作逻辑时，会用到useRouter。1、安装 vue-router，vue3需要使用vue-router的4版本。让路由组件更方便的收到参数（可以将路由参数作为props传给组件）-- 字符串写法跳转路径要写完整的路径-->-- 使用别名直接跳转 -->-- 子路由显示位置 -->11、路由replace。
2024-12-29 20:36:26
1370
原创 watch在vue3和vue2的不同
但是这里对对象的监听又有点问题，数据改变时无法拿到oldValue，使用reactive定义的对象会出现这个问题，由于ref在定义响应式对象时也调用了reactive中的方法，所以这个问题目前还无法直接解决，可以通过直接监听对象中的属性来解决，或者把想要监听的属性通过ref来定义。vue3中的watch变成了函数形式，有三个参数，第一个是监听的对象，第二个是监听的回调，由于setup不需要考虑this的指向问题，所以可以直接在watch中写箭头函数，第三个是监听的配置项；vue2中的watch的基础语法。
2024-12-22 21:18:20
470
原创 Element Plus 自定义弹出框组件
本文将介绍如何通过Vue 3和Element Plus，使用一个自定义的弹出框组件实现这一目标。封装了一个通用的弹出框组件，具体实现位于 util.js 文件中。通过 initInstance 方法，可以动态创建一个弹出框实例，并将其挂载到指定的容器上。具体的弹出框组件 PortPop，这个组件使用了 Element Plus 的 Dialog 组件，并在其中嵌套了一些其他组件，以实现特定的功能。这个配置使用了前面封装的通用方法，同时为弹出框提供了一些特定的配置。使用自定义弹出框组件。
2024-12-15 21:19:46
608
原创 element-plus动态表单验证
prop对应表单字段（注意是表格里每一行对应的字段 forms.tableData[下标].key）13.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）Vue3结合element-plus表单项可以动态添加/删除。10.多个8位数字格式(yyyyMMdd)并以逗号隔开。rules对应data rules对象。首先data格式必须是对象包裹数组。表格绑定tableData数据。12.前两位是数字后一位是英文。2.是否手机号码或者固话。给表单项增加验证规则。
2024-12-08 22:49:40
1992
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人