- 博客(57)
- 收藏
- 关注
RSS订阅原创 在 Vue 中嵌入 Unity WebGL 并实现双向通信
本文介绍了在Vue.js项目中集成Unity WebGL应用的高级双向通信方案。通过改造Unity默认生成的index.html文件，将其转变为"通信桥梁"，实现Vue与Unity的解耦交互。文章详细阐述了核心架构设计：Vue应用通过postMessage发送指令，改造后的index.html作为中间层进行消息转发，Unity则专注于3D逻辑处理。重点讲解了如何修改index.html文件，使其具备双向通信能力，包括Unity→Vue的消息转发和Vue→Unity的指令接收分发。同时提供
2025-08-26 14:29:16
950
原创 在 OpenLayers 中实现自定义右键菜单：基于 vue3-context-menu 的完整指南
本文介绍了在Vue3和OpenLayers项目中实现右键菜单功能的方法。通过vue3-context-menu组件库，可以快速构建功能丰富、样式可定制的右键菜单。主要内容包括：1)环境准备与组件集成；2)核心实现逻辑，重点讲解如何捕获地图右键事件并显示自定义菜单；3)菜单项配置详解，包括基本菜单项、子菜单和自定义图标。文章提供了完整的代码示例，展示了如何结合状态管理实现动态菜单交互。该方法能有效提升WebGIS应用的用户体验和界面整洁度。
2025-08-26 14:29:02
883
原创 深入理解 JavaScript 的作用域与作用域链
JavaScript作用域决定变量可访问范围，包括全局作用域（易污染）、函数作用域（密封舱）和ES6块级作用域（let/const）。作用域链机制会从当前作用域向外逐层查找变量，直至全局。常见问题包括：var变量提升、for循环作用域陷阱及闭包保存作用域。开发中应避免全局变量污染，合理使用块级作用域。作用域机制就像船舱找物资，先查当前舱室，再逐层向上，未找到则报错。
2025-08-25 11:53:00
248
原创 OpenLayers瓦片图层模块引入与使用
本文介绍了如何将OpenLayers地图初始化代码封装为独立工具函数，实现代码解耦和复用。文章首先展示在Vue组件中直接初始化地图的问题，包括代码臃肿、难以维护等。然后详细讲解将逻辑抽离到map.ts文件的过程，包括瓦片资源配置、视图参数设置等。通过initMap函数接收DOM元素ID参数，返回Map实例，使组件代码更简洁。最后还介绍了如何通过设置extent属性限制地图显示范围，并建议将边界参数存储在全局状态中。这种封装方式实现了关注点分离、代码复用和更好的可维护性，是处理复杂第三方库集成的有效模式。
2025-08-25 11:52:38
1087
原创 用 Vue 3 Composition API 打造可复用的拖拽功能 (useDraggable)
本文介绍了在Vue3中使用CompositionAPI封装可复用的拖拽功能。通过将拖拽逻辑分离为独立模块(useDraggable.ts)，实现与业务组件解耦。关键步骤包括：定义拖拽目标/句柄的ref引用，创建处理位置计算和事件监听的组合函数，以及将返回的响应式样式绑定到组件。这种方法具有高内聚、低耦合的特点，支持类型安全，并能在不同组件间复用拖拽逻辑，充分体现了Vue3组合式API的模块化优势。
2025-08-21 17:11:15
975
原创 VUE实现多个弹窗优先级变化实现思路
本文介绍了在Vue3+TypeScript环境下实现SPA多窗口层级管理的方案。核心思路包括：1）使用reactive对象集中管理窗口z-index；2）通过点击事件触发bringToFront函数提升窗口层级；3）利用watch监听新窗口打开状态自动置顶。该方法通过响应式状态、事件绑定和状态监听，实现了清晰可扩展的窗口管理，只需在配置对象添加新窗口即可扩展功能，无需修改核心逻辑。
2025-08-21 16:10:19
838
原创 前端性能优化——懒加载
懒加载是一种优化网页性能的技术，通过在长页面中延迟加载图片等资源，仅在用户滚动到可视区域时才加载。其特点包括减少无用资源加载、提升用户体验、降低服务器压力等。实现方式包括原生JavaScript监听滚动、HTML5的loading="lazy"属性、IntersectionObserver API，以及Vue的vue-lazyload插件。核心原理是将资源路径存储在data属性中，当元素进入视口时再赋值给src进行加载。懒加载适用于图片、视频等多种资源，能显著提升页面加载速度和性能。
2024-09-11 14:16:25
2127
原创 对象，字符串的解构赋值
本文介绍了ES6中对象解构赋值的特性。与数组解构不同，对象解构通过属性名匹配而非位置，变量名必须与属性名一致才能正确取值。解构失败时变量值为undefined。文章详细说明了对象解构的多种用法：嵌套解构、变量重命名、继承属性解构、默认值设置等，并指出需要注意的语法细节（如避免将大括号写在行首）。此外还提到字符串和数组也可进行类似的对象式解构。解构赋值能简化代码，方便提取对象属性和方法。
2024-05-11 10:54:09
581
原创 var,const,let的区别
摘要： var、let和const是JavaScript中声明变量的方式，主要区别在于作用域和可变性。var是函数作用域，存在变量提升；let和const是块级作用域，不存在变量提升。let允许重新赋值，但不能重复声明；const声明后不能重新赋值（基本类型），但复合类型（如对象、数组）的属性可以修改。const确保变量引用不变，而非内容不变。块级作用域解决了ES5中变量覆盖和泄露的问题。let和const引入暂时性死区，避免未声明前使用变量。函数声明在块级作用域中的行为因环境而异，建议使用函数表达式。
2024-04-30 15:01:23
289
原创 vue项目报这个错是 Same `value` exist in the tree: 0008E3000E1A？
deviceInfoCard.vue:62 Warning: Same `value` exist in the tree: 0008E3000E1A
2024-03-25 16:04:16
602
1
原创 vue3+ts+elementPlus实现选中图片并且把图片信息放入一个数组中
vue3+ts+elementPlus实现选中图片并且把图片信息放入一个数组中
2023-12-04 13:44:21
901
原创 css实现文字两端对齐
还参考了其他文档，看设置trxt-align:justify就可以实现俩端对齐，但我设置这个属性没有变化，设置了 text-align-last: justify;这个属性，才实现两端对齐。这种情况下，我们要实现俩端对齐，其实只需要给他一个固定宽度，再给他加一个属性就可以实现，因为text-align-last只对块级元素生效。如果有什么地方不严谨，错误，欢迎大家留言，让我可以进行更改。属性用于设置文本的水平对齐方式。实现单行文本俩端对齐。
2023-11-20 15:42:49
1393
原创 vue2中组件传参方式
需要注意的是，在子组件中，props是只读的，不能直接修改父组件传递的值。方法，子组件能够向父组件传递数据。在上述例子中，当点击子组件中的按钮时，将会触发自定义事件并将数据传递给父组件，最终在父组件中渲染出子组件传递的数据.通过props属性，父组件可以向子组件传递任意类型的数据，包括字符串、数字、对象等。子组件可以通过在props属性中声明需要接收的属性来访问这些值。这样，子组件就能够接收并使用父组件传递的值。方法，用于接收子组件传递的数据。在上面的例子中，子组件简单地将。在上述例子中，父组件通过。
2023-11-16 15:58:10
251
原创 uni-app的生命周期函数里应用生命周期、页面生命周期和组件生命周期的区别
uni-app的生命周期函数里应用生命周期、页面生命周期和组件生命周期的区别
2023-11-16 14:42:19
366
原创 [［‘0‘，‘1‘，‘2‘，‘3‘］，［‘4‘，‘5‘，‘6‘，‘7‘，‘8‘，‘10‘］，［‘11‘，‘12‘］]二维数组，我想把里面第一个元素取出来变成数字，放在一个新数组，转成［0，4，11］
把二维数组中的第一个元素取出来转换为数字放入新的数组
2023-11-14 10:42:59
90
原创 Some App Tech Support
用户可以通过系统了解电力设备的实时运行状况，及时发现和处理问题。同时，该系统还具备智能分析和决策能力，能够自动调整电力设备的运行参数，优化电力系统的运行效率。在控制方面，智能安全供电系统可以根据电力设备的运行状态和负荷需求，自动调整设备的运行参数，实现设备的智能化控制。例如，系统可以根据电网的负荷变化，自动调整发电机组的发电量，确保电网的稳定运行。总之，智能安全供电系统是一种集检测、控制和展示为一体的智慧化电力系统平台，能够有效提高电力系统的运行效率和安全性，降低运维成本，为用户提供更加便捷、高效的服务。
2023-11-07 10:03:05
68
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人