m0_61618849-优快云博客

原创 vue3中 getCurrentInstance

在vue2版本中，可以通过 this 来获取当前组件实例，但是在 vue3 setup 中是无法通过 this 获取组件实例对象。是在vue3中用于获取当前组件实例的内部 API，主要在组合式 API（Composition API）的setup()函数中使用。它可以访问组件的上下文、属性、插槽等。

2025-08-10 19:48:20 313

原创前端异步任务处理总结

优先使用 async/await 替代回调嵌套。数据缓存（SWR/React Query）请求合并（GraphQL/BFF）：对长时间操作提供取消支持。：图片/脚本动态加载。

2025-08-03 18:58:21 230

在 Element UI 的组件中，属性用于动态自定义表格单元格的 CSS 类名，通常用于根据数据条件设置样式。在上绑定属性，值为一个函数。该函数接收一个对象参数，返回字符串（类名）或数组（多个类名）。2. 函数参数说明函数格式：row: 当前行数据column: 当前列配置rowIndex: 行索引（从 0 开始）columnIndex: 列索引（从 0 开始）CSS 定义样式4. 高级用法返回多个类名结合列属性判断5. 注意事项

2025-07-27 20:05:10 452

原创 TypeScript 中替代 Interface 的方案

/ 直接在函数参数中定义类型。

2025-07-20 20:43:26 227

原创 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 362

原创 JavaScript中的Class类

JavaScript 的类提供了：更清晰、更结构化的面向对象编程方式简洁的继承语法（extends和super封装能力（私有字段和方法）静态成员支持Getter/Setter 访问器虽然类本质上是基于原型的语法糖，但它们显著提高了代码的可读性和可维护性。在现代 JavaScript 开发中，类已成为创建复杂对象和组织代码结构的标准方式。

2025-06-29 19:27:32 837

原创基于element plus封装可以模糊搜索的多选下拉选择

element plus 中Select 选择器提供利用筛选功能快速查找选项功能还提供了输入关键字以从远程服务器中查找数据基于以上进行封装。

2025-06-22 18:30:24 298

原创 Object.keys方法的使用

JavaScript的方法用于获取对象自身的所有可枚举属性键名，并以数组形式返回。obj目标对象。：由对象自身可枚举属性键名组成的。

2025-05-18 20:09:22 401

原创使用vue3-seamless-scroll实现列表自动滚动播放

vue3-seamless-scroll组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动。

2025-05-11 20:09:31 2382 3

原创 vue3 - keepAlive缓存组件

在Vue 3中，组件用于缓存动态组件或路由组件的状态，避免重复渲染，提升性能。我们新建两个组件，在每一个组件里面写一个input，在默认情况下当组件切换的时候，数据会被清空，但是我们用keep-alive包起来之后，数据将会被缓存，切换的时候不会被清空。

2025-05-04 19:16:23 843

原创防抖与节流的理解与应用

前端防抖（Debounce）和节流（Throttle）都是用于控制函数执行频率的技术，主要应用于优化高频事件（如滚动、输入、窗口调整等）的性能表现。：当事件被连续触发时，只有在事件停止触发后的指定时间间隔内没有再次触发，才会执行目标函数。搜索框输入联想（等待用户停止输入后再请求）窗口大小调整（等待调整结束后计算布局）表单验证（输入停止后再验证）效果：用户输入停止 500ms 后，才触发 console.log。：在指定时间间隔内，无论事件触发多少次，目标函数最多执行一次。

2025-04-20 21:39:32 376

原创 vue3动态路由

import.meta.glob动态的去拼接获取文件,把后台返回内容转换成() => import('xxxx')格式。要想实现vite+vue-router实现动态路由我们需要用到。出现404的话比如说你在路由表中维护了下面路由映射。我们可以新建一个permission.ts文件。去控制是否放行以及去哪个页面，但是在新版本的。之前我们使用导航守卫的时候需要一个参数。以下代码仅供参考，有很多需要完善的地方。官方文档中addRoute的使用。当我们添加一个主路由的时候。添加子路由也就是嵌套路由。

2025-04-13 22:34:02 685

原创 PDF预览-搜索并高亮文本

如果你需要更专业的处理，可以考虑使用其他库或工具，如pdf-lib进行更高级的文本操作。由于直接在canvas上操作比较复杂，一个简单的方法是在渲染前修改文本内容，使其包含包围高亮文本的HTML元素（如果你是在一个支持HTML渲染的环境中，如某些特定的浏览器或框架）。PDF.js 是一个通用的、基于Web的PDF阅读器，它允许你在网页上嵌入PDF文件，并提供基本的阅读功能。对于更复杂的需求，考虑使用专业的PDF处理库或深入研究PDF.js的渲染机制来实现更高级的功能。使用PDF.js加载PDF文档。

2025-04-06 21:13:41 994 1

原创 PDF.js

用于加载 PDF 文档的核心函数。返回一个包含 PDF 文档信息的 PDFDocumentProxy 对象。代表整个 PDF 文档的代理对象，包含文档级别的操作方法。代表 PDF 文档中的单个页面的代理对象，包含与页面渲染、获取文本等相关的操作方法。表示页面渲染操作的对象，通常是通过调用 page.render() 方法返回的。表示页面的文本内容，包含每个字符的位置和样式信息。

2025-03-30 20:48:02 1093

原创 el-table表格toggleRowSelection方法选中无效

toggleRowSelection方法传入的row，都要从表格tableData里取值，类似tableData[0]这样，或者tableData.forEach中的item。开发中会有对表格中进行默认选中的功能，element-plus官方有一个选中示例，如下。如果需要通过接口加载完表格数据，再回显勾选，那还需要写在nextTick函数里边。如果我们新建一个row数据，发现就是勾选不上，延迟执行也不行。

2025-03-23 18:39:37 508

原创 ElementUI 表格中插入图片缩略图，鼠标悬停显示大图

中插入图片缩略图，通过鼠标悬停显示大图？方法1：直接在模板元素中插入。方法2：通过表格列属性格式化。

2025-03-16 22:17:02 536

原创 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 1237 1

原创 el-table 实现单选的两种写法

高亮式是利用 el-table 提供的 highlight-current-row 和 @current-change 来实现的。单选则是利用了 el-radio 放在表头并绑定行数据来实现的，甚至不需要书写任何的 method 方法。current-change 当表格的当前行发生变化的时候会触发该事件。highlight-current-row 是否要高亮当前行。

2025-03-02 20:53:31 321

原创正则表达式

正则表达式（Regular Expression）是一种用于描述字符串模式的工具，在很多编程语言和文本处理工具中广泛应用，用于字符串的匹配、搜索、替换等操作。

2025-02-23 19:49:00 929

原创 element plus实现el-table中拖拽

4.在setup()中编写拖拽的逻辑，创建一个Sortable的实例，将需要拖拽的元素给到Sortable实例，进行需要的配置，然后在拖拽结束的方法onEnd()中实现改变排序的逻辑。2.在使用的组件，引入sortablejs包含在vuedraggable。1.安装 vuedraggable。3.row-key 必须设置。

2025-02-16 19:44:25 689 1

原创 Vue3使用components组件

v-model是双向数据绑定，默认情况下，组件上的v-model使用modelValue作为prop和update:modelValue作为事件。Props是单向数据流，这样可以防止子组件意外变更父组件的状态，每当父组件发生变更，子组件所有Props都会刷新到最新值。一个userInfo属性，是一个对象，然后在组件中就可以通过props.xxx来使用这些属性。上面事件章节说的是父组件响应子组件的事件，也就是说是子组件调用父组件的方法。这里同样是v-on的缩写形式，这样就绑定了事件。

2025-01-19 20:34:05 1187

原创 npm、yarn 与 pnpm 的区别

虽然它作为一个较新的选手可能在生态系统支持和原生模块兼容性方面存在一些挑战，但对于那些寻求更高效、更快速的依赖管理工具的开发者而言，PNPM无疑是一个值得尝试的选择。尽管存在一些劣势，但NPM通过不断的更新和改进，成功解决了许多早期的问题，并继续为广大JavaScript开发者提供强大的依赖管理和包安装服务。1.NPM（Node Package Manager），作为默认的JavaScript应用包管理器，与Node.js一同安装，它是目前使用最广泛的包管理器，得益于其对大量包的强大支持。

2025-01-12 21:11:33 869

原创 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 1919

原创 vue3路由

返回的是一个表示当前路由状态的对象，这个对象包含了如路径（path）、路由参数（params）、查询参数（query）等属性。当需要实现页面之间的跳转、导航栏的功能或者处理路由相关的操作逻辑时，会用到useRouter。1、安装 vue-router，vue3需要使用vue-router的4版本。让路由组件更方便的收到参数（可以将路由参数作为props传给组件）-- 字符串写法跳转路径要写完整的路径-->-- 使用别名直接跳转 -->-- 子路由显示位置 -->11、路由replace。

2024-12-29 20:36:26 1210

原创 watch在vue3和vue2的不同

但是这里对对象的监听又有点问题，数据改变时无法拿到oldValue，使用reactive定义的对象会出现这个问题，由于ref在定义响应式对象时也调用了reactive中的方法，所以这个问题目前还无法直接解决，可以通过直接监听对象中的属性来解决，或者把想要监听的属性通过ref来定义。vue3中的watch变成了函数形式，有三个参数，第一个是监听的对象，第二个是监听的回调，由于setup不需要考虑this的指向问题，所以可以直接在watch中写箭头函数，第三个是监听的配置项；vue2中的watch的基础语法。

2024-12-22 21:18:20 414

原创 Element Plus 自定义弹出框组件

本文将介绍如何通过Vue 3和Element Plus，使用一个自定义的弹出框组件实现这一目标。封装了一个通用的弹出框组件，具体实现位于 util.js 文件中。通过 initInstance 方法，可以动态创建一个弹出框实例，并将其挂载到指定的容器上。具体的弹出框组件 PortPop，这个组件使用了 Element Plus 的 Dialog 组件，并在其中嵌套了一些其他组件，以实现特定的功能。这个配置使用了前面封装的通用方法，同时为弹出框提供了一些特定的配置。使用自定义弹出框组件。

2024-12-15 21:19:46 464

原创 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 1803

原创 vue 路由

现在主流开发使用基于前端路由的 SPA 技术：整个网站只有一个界面，使用 ajax 技术局部更新界面，同时支持浏览器界面的前进后退操作。在 vue 组件中，点击 router-link 组件实现页面跳转，预留的 router-view 区域将显示指定组件。replace 方法替换当前的页面，和 push 方法的不同在于不会历史记录（一般用于 404 页面）。（对象）查询参数键值对 $route.query.favorite == 'yes'数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

2024-12-01 18:47:41 615

空空如也

空空如也