- 博客(153)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 解决ElementPlus对话框el-dialog中关闭事件重复触发问题
点击取消按钮：会触发close()关闭函数 → 然后触发对话框的handleClose()函数（内置的@close事件）需要确保点击取消按钮时仅触发一次有效关闭事件，并传递正确的布尔值参数。1. 第一次参数为PointerEvent（事件对象）2. 第二次参数为undefined。
2025-03-11 12:00:14
303
原创 vueDraggable插件拖拽过程中节点文本不允许选中方案
通过onStart在拖拽开始时给body添加一个class类，然后通过这个类设置全局的指针事件，并在onEnd拖拽结束时清除这个class类。通过物理屏蔽+定时清理，确保拖拽过程中无法选中文本，也不影响拖拽元素操作，可以根据实际效果调整清理间隔时间（50ms）。但是这个方式可能会影响页面其他容器的效果。
2025-03-04 13:51:06
287
原创 ElementUI 抽屉组件高度封装
1.自定义标题插槽：允许自定义抽屉标题内容。...解释：通过template #header插槽，将props.title包裹在div中方便定制样式。2.自定义内容插槽：在抽屉内容区域添加自定义逻辑。<img v-else-if="props.contentType === 'image'" :src="props.content" alt="自定义图片">...});解释：定义contentType和content属性，根据contentType显示文本或图片，方便传入不同类型内容数据。
2025-02-11 08:45:00
1047
原创 UnoCSS 自定义规则
虽然 UnoCSS 自带的预设规则已经涵盖了许多常见的样式需求，但在实际项目中，我们往往会遇到一些特殊的样式设定。比如，项目可能有特定的颜色主题、独特的布局方式或者特殊的交互效果，这些仅靠预设规则难以满足。通过自定义规则，我们可以将项目中反复出现的样式模式抽象成可复用的类名，不仅减少了重复代码，还能让代码结构更加清晰，维护起来更加方便。在 UnoCSS 中，我们通过在uno.config.js或uno.config.ts文件中配置rules选项来自定义规则。规则可以分为静态规则和动态规则两种类型。
2025-02-07 13:50:01
992
原创 关于el-table翻页后序号列递增的组件封装
项目中经常会用到的一个场景，表格第一列显示序号（1、2、3...），但是在翻页后要递增显示序号，例如10、11、12（假设一页显示10条数据），针对这种情况，封装了一个vue的组件。
2025-01-29 09:30:00
190
原创 解决项目中npm包版本管理的常见问题
在package.json里，版本号前的^是常见版本范围表示。如^x.y.z，主版本号（x）固定，次版本号（y）和修订版本号（z）会安装为该范围内最新版本。这会使npm按仓库版本发布和依赖解析算法选最新版本。不同开发者执行install时小版本可能不同。若包遵循语义化版本规范且小版本升级兼容，理论上不影响核心功能；若小版本升级包含未测代码或隐藏变更，项目在不同环境表现可能不一致。在构建和部署上，不同小版本的文件结构或依赖关系的细微差异，可能导致构建失败、构建产物不同或部署时行为异常。
2025-01-25 09:15:00
301
原创 用css实现一个类似于elementUI中Loading组件有缺口的加载圆环
2，通过border给圆的边框设置宽度和颜色，并通过border-top-color设置和当前背景色一致，实现有缺口的视觉效果。3，将圆的background-color设置为transparent透明，形成一个空心的圆环。1，使用一个div，设置宽高相等、再设置border-radius为50%，形成一个圆；4，定义spin动画，使圆环旋转，实现加载的视觉效果。
2025-01-23 10:33:45
617
原创 TypeScript中的类型断言as
类型断言是TypeScript中一个强大的工具，它为我们在处理类型时提供了更多的灵活性。它可以帮助我们处理联合类型、与类型定义不完善的第三方库交互等情况。然而，我们也要谨慎使用，因为错误的类型断言可能会导致运行时错误。只要我们在使用类型断言时遵循合理的规则并且对我们处理的数据有清晰的理解，就能充分发挥它的优势，写出更加健壮、类型安全的TypeScript代码。
2024-12-31 09:15:00
332
原创 原子化CSS与CSS预编译器的对比
本文对比了原子化CSS（以Unocss为例）和CSS预编译器（以Sass为例）的不同特点。原子化CSS通过组合小的类名来构建样式，具有全局复用性和按需加载的优势，但在处理复杂样式时可能显得不够灵活。CSS预编译器则通过变量、嵌套和混合等功能提供了更高的灵活性，但需要编译过程且可能导致文件体积较大。两者各有优劣，结合使用可能是一种有效的策略。
2024-12-17 09:00:00
543
原创 时光机与反应堆：React Hooks 的循环历程
设想你是一名掌控时光的科学家，每次按下按钮，你的时光机就带领你穿越至不同年代，见证科技演变的奇迹。同样地，在Web开发领域，React Hooks 就像是时光机的操控台，让功能组件具备了管理状态和副作用的能力，打破了传统Class Component的界限，实现了更简洁、更灵活的编程模式。
2024-12-11 09:15:00
698
原创 解锁ECMAScript 最新核心特性
自ES6（ECMAScript 2015）发布以来，JavaScript每年都有重大更新，引入了一系列革命性的新特性和API，极大地提升了开发效率和代码可读性。以下是在ES6之后版本中的一些核心新特性总结。
2024-12-04 09:15:00
587
原创 厨艺与编码：从厨房秘籍探索WebPack中的Tree Shaking与Code Splitting--让你的前端菜单瘦身的秘密
想象一下，你是位大厨，正准备为即将举行的宴会精心筹备一份精美的菜单。然而，面临的问题是如何让每一道菜既美味又不会使宾客感到过重负担？这就像我们在前端开发中遇到的情景，我们需要设计的应用既要丰富，又要确保加载速度快，体验佳。让我们一起走进前端的“厨房”，学习如何运用Tree Shaking与Code Splitting这两把锋利的刀具，让我们的“菜品”更加精致且高效。
2024-12-02 14:13:15
705
原创 vue+xterm.js+websocket实现的网页版终端权威指南
因为最近项目需要写一个网页版终端，然而网上资料很多，但发现相关配置和API都很少，而且官网文档也很难看懂，因此小编翻阅了核心的源码，实现了一版，在此分享给各位码农。当终端中的文本选择发生改变（例如，用户通过鼠标或键盘操作选择了不同的文本区域）时触发该回调函数。这可以用于跟踪用户在终端中的光标操作，例如实现一些与光标位置相关的交互逻辑或者记录用户的操作轨迹。当终端的大小（例如，列数、行数或者整个窗口的大小）发生改变时触发该回调函数。当终端接收到任何数据（文本数据或其他可解释为数据的输入）时触发该回调函数。
2024-11-11 09:15:00
2105
原创 领略CSS Flex布局的精髓：打造响应式与创新设计
Flexbox，作为CSS中的一种革新性布局模式，专为解决复杂页面布局难题而生。通过设定元素为Flex Container，其直接子元素即成Flex Items，遵循主轴和交叉轴规则排布。利用flex-direction控制Items的横向或纵向展示，flex-wrap实现自动换行，配合align-self和order调整单个项的对齐与排序。还有诸多如justify-content和align-items等高级技巧
2024-11-05 09:04:37
915
原创 深度解密CSS position：90%的面试者都答错的问题
本篇深度剖析了CSS中的position属性，这一常令面试者头疼的概念。文章首先介绍了文档流的基础知识，随后详细探讨了position属性的四种核心定位方式：static、relative、absolute及fixed。通过生动的实例，诸如联系客服的浮动按钮、侧边导航菜单及居中布局，清晰展示了每种定位的实际应用场景。
2024-10-31 09:15:00
462
原创 深入浅出Vue样式穿透之谜：:deep(或::v-deep)、/deep/与＞＞＞
本文深入剖析了Vue中样式穿透的关键概念：:deep（或::v-deep）、/deep/及>>>。通过生动的比喻，阐述了这些命令如何帮助样式突破组件界限，直接影响子组件。:deep为首选方案，适应现代Vue开发，而/deep/与>>>虽功能类似，现被视为过时，但在理解旧项目时仍需知晓。本文旨在提升开发者对样式穿透的理解，促进更高效、灵活的前端开发实践。
2024-10-29 09:18:55
1423
原创 React核心技术解析：以“智能购物助手”洞悉奥秘
本文将以“智能购物助手”案例为比喻，深入剖析React的三大关键技术点：虚拟DOM的高效性、状态与属性的灵活运用，以及函数式与类组件的设计哲学，带你领略React背后的精妙机制。
2024-10-16 09:48:14
622
原创 WebGL深究：动画与交互 —— 赋予虚拟世界生命与灵魂
本文深入剖析了WebGL中的动画与交互机制，通过JavaScript定时器实现连续动画效果，展现了3D模型动态响应的魅力。进一步介绍了粒子系统与物理模拟两大核心技术——粒子系统通过模拟众多独立移动单元，创造出逼真的自然现象；物理模拟则依据刚体、软体及流体动力学原理，提升场景的真实感。综合运用这些技术，开发者能够构建出生动、互动且高度沉浸式的WebGL体验，释放无限创意潜能。全文辅以实用代码示例，旨在启发读者探索WebGL创作的无尽边界。
2024-10-02 09:15:00
988
原创 WebGL进阶：光照与阴影 —— 让数字世界充满真实之光
本文深入介绍了WebGL中的高级光照技术，包括直觉式讲解光照模拟的重要性及其实施方法，展示了如何通过顶点与片段着色器调整光照效果。特别聚焦于环境光遮蔽（AO）与法线贴图两项关键技术，前者增强了场景深度，后者提升了表面质感，无需过多增加几何复杂度即可展现细腻凹凸细节。通过代码示例与直观的生活类比，文章详述了AO计算与法线贴图的集成流程，引导读者轻松掌握这些核心技巧，进而打造出兼具真实感与美学价值的3D视觉效果。
2024-09-25 09:45:00
954
原创 WebGL中的纹理映射：为虚拟世界穿上华丽的外衣
本文深入浅出地介绍了WebGL中的纹理映射技术，通过类比日常生活中的贴纸装饰，使读者直观理解其作用。文中详述了纹理映射的工作原理，包括纹理的加载、着色器的编写与纹理坐标的应用，并提供了关键的GLSL代码示例，旨在引导开发者掌握这一增强3D模型真实感的重要技能。
2024-09-18 13:23:14
575
原创 WebGL入门：将3D世界带入网页的魔法
WebGL是HTML5技术之一，用于在浏览器中创建3D图形，无需插件。它通过GPU加速，利用坐标系定位、顶点与片段着色器上色，以及缓冲区存储数据。示例代码展示了设置视角、编写着色器和加载顶点数据的过程，是构建复杂3D场景的基础。掌握这些核心概念，可开启网页3D图形开发之旅。
2024-09-14 09:27:55
986
原创 TypeScript进阶指南：复杂的类型操作与高级特性
探索TypeScript的高级特性，包括索引签名与索引类型、类型别名与递归类型，以及装饰器（函数装饰器、类装饰器、属性装饰器）。通过生动的生活例子和代码示例，本文深入浅出地讲解了这些复杂概念，帮助读者掌握TypeScript的进阶技巧，提升代码质量和项目维护性。无论是初学者还是有经验的开发者，都能从中受益，学习如何利用TypeScript的强大功能，构建更加健壮和可维护的软件系统。
2024-09-06 10:47:09
1169
原创 从面向对象(OOP)到面向切面(AOP)：编程范式的演变
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
2024-08-30 10:14:48
1505
原创 前端资源优化全攻略：提速加载，优化体验
在互联网时代，网站加载速度直接影响用户体验与网站排名。本文深入探讨了前端资源优化的策略，包括gzip压缩的原理与应用、图片的无损与有损压缩、字体格式的优化、以及代码拆分的高效加载技术。通过使用如compression-webpack-plugin、imagemin、ttf2woff2等工具，以及Vue项目中的动态导入，我们可以显著提升页面加载速度，为用户创造更流畅的浏览体验。前端资源优化，就像为网站瘦身，不仅提升了速度，也优化了搜索引擎的抓取效率，是现代网站设计不可或缺的一部分。
2024-08-20 09:16:08
963
原创 Web Components：构建模块化与可维护的Web应用
本篇教程深入介绍了 Web Components 的核心概念，包括 HTML Custom Elements、Shadow DOM 和 HTML Templates 的使用，以及如何利用这些技术构建模块化和可维护的 Web 应用。通过生动的类比和实用的代码示例，我们探讨了自定义组件的定义、样式封装和模板复用，展示了如何在实际项目中应用这些概念，以提升 Web 开发的效率和代码质量。希望本教程能够成为你掌握 Web Components 和构建现代 Web 应用的宝贵资源。
2024-08-13 09:00:00
1425
原创 Typescript入门-掌握核心类型概念
本篇教程旨在引导前端开发者从零开始掌握TypeScript的核心类型概念。通过生动的生活例子和实用的代码示例，我们深入探讨了类型声明、类型推断、接口、泛型、枚举类型、联合类型以及类型别名等关键概念。掌握这些概念将帮助开发者编写更健壮、可读性和可维护性更高的代码，同时利用TypeScript的静态类型系统避免常见的运行时错误，为构建复杂和大规模的前端应用打下坚实基础。希望本教程能成为你TypeScript学习之旅的坚实起点，鼓励你在实际项目中应用和探索更多高级特性。
2024-08-07 09:52:52
806
1
原创 从前端角度解析RESTful API与GraphQL在React中的应用
探索前端开发的世界，本文提供了关于如何选择合适的前端框架和库的指导，包括React、Vue、Angular、Svelte以及Bootstrap和Tailwind CSS等流行工具。深入了解如何利用这些强大的资源提升开发效率，构建高效的响应式布局，并解决常见的浏览器兼容性问题。文章还讨论了前端性能优化的重要性，帮助你为项目选择最佳的技术组合。无论你是初学者还是经验丰富的开发者，这篇全面指南都将帮助你根据项目需求和技术栈偏好，做出明智的选择，充分利用前端生态系统的丰富资源。
2024-07-31 09:22:26
1206
原创 Vue的绝密武器：揭秘组件更新的终极技巧
本文深入探讨了Vue.js中处理组件更新的多种技巧，包括使用v-if和v-bind:key来动态控制组件渲染，利用计算属性和观察者来智能响应数据变化，以及在必要时通过重置数据或使用$forceUpdate来强制刷新组件。文章提供了丰富的代码示例，旨在帮助开发者更好地理解和应用这些技巧，从而提升应用的用户体验和性能。无论是Vue新手还是有经验的开发者，都能从中获得宝贵的知识和实战经验。
2024-07-22 09:00:00
1342
原创 这货很干，需要你慢慢品：Vue3大师级技巧与响应式艺术探秘
踏入Vue 3的精彩领域，本文详解了其革新特性，如defineProps、defineEmits等，它们犹如匠人的利器，助你雕琢出更为精致的组件之花。通过形象的比喻——园丁的剪刀、智能食谱、忠诚宠物等，我们揭开了reactive、ref等特性的神秘面纱，它们不仅强化了Vue的响应式系统，更优化了数据流的织造，让代码如诗般流畅。无论是编程新手或是资深开发者，皆能在此找到启迪。本文不仅是指南，更是思想的火花，激发你在Vue 3的世界中畅游无阻。加入我们，一同挖掘Vue 3的深邃力量，铸就前端艺术的辉煌之作。
2024-07-16 09:28:02
861
原创 Vue指令详解与实操运用 - 编程魔法
除了预设的指令外，你还可以创造自己的个性化指令，就像是独一无二的魔法咒语。自定义指令让你能够扩展Vue的功能，实现特定的DOM操作或行为。想象一下，你需要给网页中的图片添加一个特效，当鼠标悬停在图片上时，图片会微微放大。这时候，你可以创建一个名为v-zoom的自定义指令来完成这项任务。// 注册一个全局自定义指令 `v-zoom`// 当被绑定的元素插入到 DOM 中时……// 放大1.1倍});// 恢复原大小});});
2024-07-09 08:50:52
598
原创 跨越世代的对话：Vue3与Vue2组件通信方式的对比与实战
在Vue3的世界里，组件之间的通信就像是社区中的居民交流信息。有的信息只需要邻居间悄悄传递，有的则需要整个社区都知道。Vue3提供了多种方式来实现这种交流，让我们用生活中的例子来解释这些通信方式，并附上Vue3的简单代码示例。
2024-07-01 10:58:16
1076
原创 2024年，计算机相关专业还值得选择吗？
2024年，计算机相关专业依然是一个值得选择的方向。它不仅代表着未来的发展趋势，更是个人成长和实现梦想的舞台。在做出选择时，我们应当综合考虑个人的兴趣、行业的需求和学校的环境，做出最适合自己的决定。愿每一位考生都能在人生的重要转折点上，找到属于自己的光明未来。
2024-06-24 10:03:17
620
原创 Yarn：引领JavaScript包管理新潮流
综上所述，Yarn相对于NPM具有诸多优势，这些优势不仅体现在技术层面，更体现在用户体验和团队协作等多个方面。因此，我们有理由相信，Yarn将会引领JavaScript包管理的新潮流，成为未来开发的主流工具之一。
2024-06-24 09:21:28
407
原创 高考后的“大作战” -- 选择的智慧，不妨用老子《道德经》的角度去思考
以马云为例：他在创业初期曾遭遇多次失败和挫折，但他始终没有放弃自己的梦想。最终，他创立了阿里巴巴集团，成为了中国电商领域的领军人物。马云的成功故事告诉我们，只有勇敢前行、坚持不懈地努力才能实现自己的梦想和目标。选择专业和学校的过程可能会充满困惑和挑战，但只要我们保持积极的心态和坚定的信念，就一定能够找到最适合自己的道路。记住，无论选择什么专业和学校，最重要的是要相信自己，勇往直前！希望这篇文章能够帮助到正在迷茫中的考生和家长们，找到最适合自己的道路，实现自己的梦想。
2024-06-18 14:28:03
951
2
原创 Flex 布局：从零到一的实战指南
通过这些小例子，我们可以看到 CSS Flex 布局在实际应用中的强大功能。无论是布局控制、方向控制还是对齐与分布，Flex 都能提供简洁而有效的解决方案。同时，结合媒体查询，我们可以轻松地创建出适应不同屏幕尺寸的响应式网站。随着你对 Flex 布局的深入了解，你将能够更加灵活地运用它，创造出既美观又实用的网页设计。
2024-06-17 08:45:14
1080
1
原创 SASS详解：从零到一，轻松驾驭CSS预处理器
Sass是一个功能强大的CSS预处理器，它通过引入变量、嵌套规则、混合、函数、导入、控制指令和扩展等概念，极大地提高了CSS的开发效率和可维护性。掌握Sass的基本概念和用法，将使你能够编写出更加模块化、可重用和易于管理的样式表。
2024-06-14 17:19:39
692
人工智能chatgpt学习宝典：原理、实践、案例一网打尽
2024-04-03
echarts bar series下的label position位置实现问题
2019-04-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人