- 博客(155)
- 收藏
- 关注
RSS订阅原创 echarts踩坑之路之折线图多条线数据一样纵坐标却对应不一样
用于数据堆叠，同个类目轴上，系列配置相同的stack，后一个系列的值会加在前一个系列之后。通俗一点讲就是：当两条线数值相近时，后面的值会在前一个系列的值上面叠加。从而就出现了线和值对不上的情况。去掉 stack 或者每个系列使用不同的 stack 值。方案一：把 stack 配置注释掉。方案二：stack 给不同的值。
2024-12-06 16:42:32
395
原创 ＜el-popover＞可以展示select change改变值的时候popover 框会自动隐藏
Vue3的 element-plus 相对于 Vue2 的 element-ui，popover组件的实现方式有较大变化：不使用vue-popper，而是直接用el-tooltip来实现。element-plus的 popover 组件内部如果使用了el-select组件，需要确保 el-select 的 teleported 值为false，否则会出现展开select下拉框时，popover组件自动收起。
2024-11-08 18:09:13
805
原创 实现简易 vuedraggable 的拖拽排序功能
将 searchResult 改为响应式数据为 draggable 组件添加 @end 事件处理器可写入对应逻辑实现 onDragEnd 方法来更新数据。
2024-09-26 16:47:59
492
1
原创 vue实现左侧数据拖拽到右侧区域，且左侧数据保留且左侧数据不能互相拖拽改变顺序
采用 vuedraggable 插件进行功能实现保留左侧数据 主要是中 ‘clone’保持左侧数据不能互相拖拽改变顺序 主要是配置左侧拖拽到右侧数据去重主要采用实现拖动到右侧区域之前可以改变的样式采用添加 'dragging-item’设置样式。
2024-09-25 16:13:38
621
原创 vue 关于两个if条件中的promise
可以使用Promise.all来确保两个if语句中的异步操作都执行完毕。这样，Promise.all会等待所有的Promise都完成后再继续执行。期望if判断条件里的两个promise 都同时执行完成。
2024-08-15 14:37:55
333
原创 for循环 绘制Echarts图表之后，点击 添加图表向前插入图表遇到实例未更新
for循环 绘制Echarts图表之后，点击 添加图表向前插入图表遇到实例未更新
2024-06-19 10:27:24
453
原创 vue3项目中用codemirror实现格式化java代码及不太成熟的历程
vue3项目使用preitter 搭配prettier-plugin-java 实现codemirror 格式化 java
2024-01-25 19:05:16
2392
原创 vue3使用AntV G6 (图可视化引擎)历程[二]
上期回顾：历程[一]描述了基本的树状图的绘制，默认节点类型defaultNode中的type是circle,下面这篇描述的是节点抽离自定义节点并做数据静态渲染。
2024-01-24 15:43:23
1002
1
原创 vue3使用AntV G6 (图可视化引擎)历程[一]
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。
2024-01-23 14:28:37
2076
4
原创 Vue3/Vue2实现文章内容中多个“关键词“标记高亮显示
属性类型默认值描述query- 必填搜索内容，可以使用字符串或正则表达式。Booleanfalse是否区分大小写。Booleanfalse是否区分变音符号，如 u 和 ü。Booleanfalse是否用空格分割字符串以使其成为搜索字符串，如果设置为false，则默认把搜索内容当成一个整体进行搜索；当 query 为正则时，splitBySpace 默认为 false。String< mark />标记搜索到的内容所包裹的标签。
2024-01-18 17:51:09
1991
1
原创 codeMirror之实现代码格式化代码功能
prettier.format 是 Prettier 库的一个主要方法，用于格式化代码。它接收两个参数：要格式化的代码字符串和一个选项对象。parser（解析器）：这是必须的选项，用于指定解析代码的解析器。Prettier 支持多种语言，每种语言都有对应的解析器，例如 babel（用于 JavaScript）、html、css、json 等。printWidth（打印宽度）：指定每行代码的最大长度。如果超过这个长度，Prettier 会尽可能地进行折行。默认值是 80。
2024-01-18 10:51:07
2556
原创 vue之虚拟滚动
以上代码中，RecycleScroller会渲染dataList中的数据，每个列表项的高度是50px，使用页面模式和垂直滚动，渲染缓冲区大小是200px，预渲染10个列表项，并在列表项更新时触发update事件。在页面模式下，滚动容器是document.documentElement，否则是RecycleScroller自身。虚拟滚动的原理是只渲染可视区域内的数据，当用户滚动时，动态计算并渲染新的可视数据，从而实现大数据量的流畅滚动。item-size：数字，每个列表项的大小（高度或宽度）。
2024-01-15 19:45:10
3918
1
原创 js之零碎工具（四）
对于每个对象，我们先获取它的所有属性名，然后对属性名进行排序，然后使用 Array.prototype.reduce 创建一个新的对象，这个新的对象的属性是按照排序后的顺序添加的。（ps: 如果你的数组中包含对象，那么这种方法可能无法正确地去重，因为 Set 使用的是严格相等性检查 (===)，所以 {} 和 {} 是不相等的。在这种情况下，你可能需要使用其他方法来去重。如果数组中包含的对象，属性的顺序不同，但是属性值一样，我们仍然认为它们是相同的，那么我们可以先对对象的属性进行排序，然后再进行去重。
2023-12-20 17:51:35
600
原创 【电视剧-长相思】经典语录
小编看了这么长时间的电视剧，突然感觉摘抄经典语录最有成就感，嘿嘿，下面是我在《长相思》（第一季）中感觉好的一些语录，语录是乱序排列哈。
2023-11-17 23:03:39
880
原创 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
652
原创 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
5417
原创 将一个树形结构的数据平铺成一个一维数组(vue3)
所以，才会出现【二、案例场景】类似的场景，可以用来多选 ，并可以实现单选父级而不关联子级，选择了将树状数据进行平铺，并且可以分类，为了实现这个，可是绞尽脑汁呀。在每次遍历中，首先通过判断 parentName 是否存在，来决定新的名称 newName 是仅为当前元素的名称，还是父级名称与当前元素名称的组合。创建一个新的对象 newItem，它是当前元素的深拷贝，并添加了两个新的属性：parentId 和 parentName。函数的主要功能是将一个嵌套的分类列表平铺开来，同时保留每个分类项的父级名称。
2023-08-23 15:39:01
994
原创 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
3235
原创 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
2484
10
原创 Vue3之路由认识
const $router = useRouter() // 这是路由跳转的const $route = useRoute() // 用于接收路由参数的useRouter 和 useRoute 是 Vue.js 3.2 中新增的两个用于路由管理的 Composition API。useRouter 用于获取路由实例。而 useRoute 用于获取当前路由对象。使用这两个 API，我们可以更加方便地管理前端路由，提高开发效率。
2023-08-03 14:59:43
400
原创 Ts定义对象类型之Record＜string, any＞
ps: 简单来说，就是在定义obj对象上 ，属性（string）和 属性值（any） 的类型。
2023-05-06 17:13:27
2929
原创 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
1036
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人