在路上`-CSDN博客

原创 Form 表单选择多个时间段完成必填校验

【代码】Form 表单选择多个时间段完成必填校验。

2024-03-26 10:13:25 197

原创 vue3项目中用codemirror实现格式化java代码及不太成熟的历程

vue3项目使用preitter 搭配prettier-plugin-java 实现codemirror 格式化 java

2024-01-25 19:05:16 1349

原创 vue3使用AntV G6 (图可视化引擎)历程[二]

上期回顾：历程[一]描述了基本的树状图的绘制，默认节点类型defaultNode中的type是circle,下面这篇描述的是节点抽离自定义节点并做数据静态渲染。

2024-01-24 15:43:23 441

原创 vue3使用AntV G6 (图可视化引擎)历程[一]

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

2024-01-23 14:28:37 537

原创 Vue3/Vue2实现文章内容中多个“关键词“标记高亮显示

属性类型默认值描述query- 必填搜索内容，可以使用字符串或正则表达式。Booleanfalse是否区分大小写。Booleanfalse是否区分变音符号，如 u 和 ü。Booleanfalse是否用空格分割字符串以使其成为搜索字符串，如果设置为false，则默认把搜索内容当成一个整体进行搜索；当 query 为正则时，splitBySpace 默认为 false。String< mark />标记搜索到的内容所包裹的标签。

2024-01-18 17:51:09 1243

原创 codeMirror之实现代码格式化代码功能

prettier.format 是 Prettier 库的一个主要方法，用于格式化代码。它接收两个参数：要格式化的代码字符串和一个选项对象。parser（解析器）：这是必须的选项，用于指定解析代码的解析器。Prettier 支持多种语言，每种语言都有对应的解析器，例如 babel（用于 JavaScript）、html、css、json 等。printWidth（打印宽度）：指定每行代码的最大长度。如果超过这个长度，Prettier 会尽可能地进行折行。默认值是 80。

2024-01-18 10:51:07 1232

原创 vue之虚拟滚动

以上代码中，RecycleScroller会渲染dataList中的数据，每个列表项的高度是50px，使用页面模式和垂直滚动，渲染缓冲区大小是200px，预渲染10个列表项，并在列表项更新时触发update事件。在页面模式下，滚动容器是document.documentElement，否则是RecycleScroller自身。虚拟滚动的原理是只渲染可视区域内的数据，当用户滚动时，动态计算并渲染新的可视数据，从而实现大数据量的流畅滚动。item-size：数字，每个列表项的大小（高度或宽度）。

2024-01-15 19:45:10 886

原创 js之零碎工具（四）

对于每个对象，我们先获取它的所有属性名，然后对属性名进行排序，然后使用 Array.prototype.reduce 创建一个新的对象，这个新的对象的属性是按照排序后的顺序添加的。（ps: 如果你的数组中包含对象，那么这种方法可能无法正确地去重，因为 Set 使用的是严格相等性检查 (===)，所以 {} 和 {} 是不相等的。在这种情况下，你可能需要使用其他方法来去重。如果数组中包含的对象，属性的顺序不同，但是属性值一样，我们仍然认为它们是相同的，那么我们可以先对对象的属性进行排序，然后再进行去重。

2023-12-20 17:51:35 538

原创【电视剧-长相思】经典语录

小编看了这么长时间的电视剧，突然感觉摘抄经典语录最有成就感，嘿嘿，下面是我在《长相思》（第一季）中感觉好的一些语录，语录是乱序排列哈。

2023-11-17 23:03:39 739

原创 vue3之pinia简单使用

pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。就是和vuex一样的实现数据共享。依据Pinia官方文档，Pinia是2019年由vue.js官方成员重新设计的新一代状态管理器，更替Vuex4成为Vuex5。Pinia 目前也已经是 vue 官方正式的状态库。适用于 vue2 和 vue3。可以简单的理解成 Pinia 就是 Vuex5。也就是说， Vue3 项目，建议使用Pinia。pinia官方文档pinia的优点pinia 符合直觉，易于学习。

2023-09-12 14:57:27 517

原创 iframe 实现跨域，两页面之间的通信

iframe跨域时，iframe组件之间常用的通信，主要是H5的possmessage方法。一个项目为vue2，一个项目为vue3，两个不同的项目实现iframe嵌入，并实现通信。子页面-vue3， (端口号为127.0.0.1:8081)父页面-vue2（端口号为127.0.0.1:8080）

2023-09-11 19:31:46 3651

原创将一个树形结构的数据平铺成一个一维数组(vue3)

所以，才会出现【二、案例场景】类似的场景，可以用来多选，并可以实现单选父级而不关联子级，选择了将树状数据进行平铺，并且可以分类，为了实现这个，可是绞尽脑汁呀。在每次遍历中，首先通过判断 parentName 是否存在，来决定新的名称 newName 是仅为当前元素的名称，还是父级名称与当前元素名称的组合。创建一个新的对象 newItem，它是当前元素的深拷贝，并添加了两个新的属性：parentId 和 parentName。函数的主要功能是将一个嵌套的分类列表平铺开来，同时保留每个分类项的父级名称。

2023-08-23 15:39:01 625

原创 TS 踩坑之路（四）之 Vue3

不能将类型“{ isBackBtn: false;}”分配给类型“(props: PropsType) => RouteMsgType”。对象字面量只能指定已知属性，并且“isBackBtn”不在类型“(props: PropsType) => RouteMsgType”中。ts(2322)headerTopPart.ts(14, 3): 所需类型来自属性 “routeMsg”，在此处的 “InferDefaults” 类型上声明该属性UNUSED: '草稿', //（草稿，未使用）},

2023-08-08 17:32:29 1859

原创 el-select框在 @change和remove-tag事件同时使用时，踩过的坑

Vue 的 $nextTick 方法用于在下一个 DOM 更新周期之后执行延迟回调。在修改数据之后，可以使用 $nextTick 来等待 DOM 更新。这在需要在数据变化之后立即操作 DOM 时非常有用。在 Vue 2 中, $ nextTick 是 Vue 实例的一个方法，可以在组件内部使用 this.$nextTick 调用。methods: {// 在这里执行 DOM 操作，因为此时 DOM 已经更新});},},

2023-08-05 19:37:59 1163 4

原创 Vue3之路由认识

const $router = useRouter() // 这是路由跳转的const $route = useRoute() // 用于接收路由参数的useRouter 和 useRoute 是 Vue.js 3.2 中新增的两个用于路由管理的 Composition API。useRouter 用于获取路由实例。而 useRoute 用于获取当前路由对象。使用这两个 API，我们可以更加方便地管理前端路由，提高开发效率。

2023-08-03 14:59:43 345

原创 js之零碎工具（三）

【代码】js之零碎工具（三）

2023-07-22 17:27:48 106

原创 Ts定义对象类型之Record＜string, any＞

ps: 简单来说，就是在定义obj对象上，属性（string）和属性值（any）的类型。

2023-05-06 17:13:27 1898 1

原创 vue-router 如何在新窗口打开页面

vue-router 在新窗口打开页面

2023-05-06 16:45:01 6354

原创 Vue3自定义指令之前端水印功能实现

前端实现水印功能

2023-04-15 21:44:55 1657

原创 TS 踩坑之路（三）

Declaration of public instance method not allowed after declaration of private instance method. Instead, this should come after private instance fields.将定义的public 方法放到最前面，（排在最前）

2023-04-04 17:37:00 416