- 博客(27)
- 收藏
- 关注
RSS订阅原创 好用的图标库和字体库
前端开发资源指南： 图标库推荐： Ant Design自带图标（需安装@ant-design/icons） 阿里巴巴矢量图标库（Iconfont） 字节跳动IconPark图标库 字体库使用（以字体天下为例）： 下载.ttf文件至项目assets/font目录 通过@font-face引入字体 在CSS中调用（如LED数字字体示例） 注：具体安装及引用方式详见代码片段，适用于大屏数据可视化等场景。
2025-06-25 13:09:47
354
原创 padding和margin这种，项目里面怎么设置值，使用px还是rem 还是什么，有什么区别
推荐使用rem：适合响应式设计。可以通过调整根元素的font-size来适配不同设备。
2025-06-23 13:31:57
556
原创 下雪效果（html+js）
摘要：本文展示了一个使用JavaScript和CSS实现的网页下雪动画效果。通过创建200个随机大小(3-8px)的圆形雪花元素，设置随机位置、下落速度和水平飘移幅度，配合CSS动画实现自然飘落效果。雪花采用box-shadow发光效果，增强视觉表现。代码包含完整的HTML结构和JavaScript实现，通过改变随机参数可调整雪花的密度、速度和发光强度。该效果适合用作冬季主题网站的装饰背景。
2025-06-23 12:01:36
350
原创 i18n了解和配置
i18next是一个JavaScript国际化库，react-i18next是其React插件。安装核心包i18next和react-i18next，可选添加语言检测和HTTP后端插件。创建翻译资源文件（如zh.json/en.json），通过i18n.js配置文件初始化，设置默认语言和备用语言。最后在App.tsx中引入i18n配置即可实现多语言切换功能。该方案支持中英文切换，并提供了React安全防护机制。
2025-06-23 10:11:42
274
原创 防抖不同的实现
文章摘要： 防抖函数是一种延迟执行的技术，适用于搜索输入等高频触发场景。本文介绍了两种实现方式：1）原生实现，通过setTimeout控制执行时机，可选择立即执行选项；2）使用Lodash库的_.debounce方法。代码示例展示了如何封装debounce工具函数，并在按钮点击事件中应用，其中简单版不考虑立即执行，完整版支持immediate参数。两种方式都能有效控制函数触发频率，Lodash方案更为便捷。
2025-06-20 15:39:55
185
原创 Tailwind CSS 配置和问题解决
摘要：本文介绍TailwindCSS的安装配置流程及常见问题解决方案。首先说明Tailwind通过扫描文件生成CSS样式，详细步骤包括：1) 安装指定版本避免cmd错误；2) 配置tailwind.config.js文件路径；3) 在CSS文件中添加基础指令。针对VSCode报错和PostCSS插件问题，提出安装必要依赖（@tailwindcss/postcss）和配置postcss.config.cjs的解决方法。最后通过示例代码验证配置成功，展示包含文本样式、卡片布局和按钮交互的React组件效果。
2025-06-04 09:54:02
1297
原创 Zustand简单使用介绍
Zustand是一个轻量级的状态管理库，比Redux更简单易用。安装只需执行npm install zustand，通过create方法创建store定义状态和操作。在组件中直接使用store的状态和方法，无需Context。示例展示了计数器功能的实现，包括增加、减少和重置操作。Zustand的API简洁，学习成本低，适合React项目开发。
2025-05-30 16:12:32
355
原创 react使用Antv g2的总结(5x版本)
margin：一般生成的图表周围空隙的间距都很大，可以自己调整。写在创建这里才能生效。，指定 chart 绘制的 DOM，可以传入 DOM id。你将它设置为true，基本可以做到自适应了。autoFit：图表是否自适应容器宽高，默认为。时，会自动取图表容器的宽高，如果用户设置了。，这样就没办法自适应高度了。container：给传入。，那么会以用户设置的。
2025-04-11 10:10:28
739
原创 需要自适应高度-例如大屏
2.中间内容一般要分成多个小块，为了小块之间可以对齐、自适应高度和宽度，content设置高度、padding和背景颜色，里面是container可以使用。4.小块里面的内容应该首先设置高度为100%，里面不同的内容不同的高度百分比，这样就可以做到自适应高度了。，表示子元素会沿着垂直方向（从上到下）排列，间距是8。，grid布局可以设置二维布局，例如生成相等2行3列的小块，：子元素换行，超出容器宽度时换行。：子元素两端对齐，中间留空。：子元素均匀分布，两端留空。：子元素换行，但方向相反。
2025-04-09 16:33:44
283
原创 怎么动态配置antd的全局配置
想要在入口文件使用仓库保存的当前用户信息动态配置全局样式，你可以在src下写一个获取用户信息和。：是无法再直接在入口文件获取你当前的用户信息的，直接写。1.要求区分不同身份，超管和普通用户的全局配置不同。入口文件如下（App.tsx,main.tsx)是会报错的，要不为空是不会起效。全局化配置的组件，用它包裹你的。就是整个应用的父组件。
2025-04-09 14:21:12
320
原创 毛玻璃效果怎么实现
文字描述：固定在页面顶部的毛玻璃导航栏，和下方可滚动的内容文本。在滚动时，毛玻璃导航栏始终固定在顶部，背景内容通过穿过毛玻璃呈现出一种柔和的视觉体验。来创建磨砂玻璃效果。标题上2个链接是参考链接。CSS 技巧之一是使用。
2025-04-01 13:39:33
365
原创 有关Antd TreeSelect理解
SelectSatellite 组件主要用于实现卫星传感器数据的展示与选择功能，支持多选、自定义标签渲染、动态数据加载等，为用户提供灵活的数据选择界面。
2025-03-26 16:58:19
686
原创 动态好看的首页（旋转的地球）
1.我使用的node 版本18.20.0。2.找到这个网页的Globe组件。2.安装 cobe，编写球的组件。utils.tsx 文件。
2025-02-17 14:58:04
305
原创 如何理解React以及前端逻辑
总结来说，React和前端逻辑是构建现代Web应用的基石，它们共同作用于提供更好的用户体验和更高的开发效率。在你的项目中，这些技术的使用是为了确保应用的响应性、可维护性和可扩展性。：在复杂的前端应用程序中，状态管理是一个重要的部分。状态管理可以帮助开发者更好地组织和管理应用程序的状态，提高代码的可维护性和可扩展性。虚拟DOM是一种优化页面渲染的技术，React通过比较新旧虚拟DOM的差异，只更新发生变化的部分，从而提高渲染效率。：通过精心设计的前端逻辑，可以提供更流畅和响应更快的用户界面。
2024-12-09 11:01:40
496
原创 在使用Leaflet地图时，瓦片影像放大超过瓦片可用的zoom级别时出现白屏的问题
在使用Leaflet地图时，瓦片影像放大超过瓦片可用的zoom级别时出现白屏的问题
2024-12-04 12:06:46
345
原创 好用的轮播表 react
/ 假设每行高度为40px// 添加状态来控制暂停// 记录当前索引....if (!isPaused) { // 只有在未暂停时才滚动// 计算下一行需要移动的距离if (nextIndex === 0) { // 当滚动到最后一项时，重置位置// 禁用过渡效果，避免重置时的动画} else {// 恢复过渡效果// 更新当前索引}, 1500);// 每1.5秒滚动一次// 添加 currentIndex 作为依赖return (<div。
2024-11-20 14:27:46
629
原创 前端 配置别名@
针对联想提示，修改VSCode配置jsconfig.json。针对路径转换，修改webpack别名路径配置 craco。创建jsconfig.json文件。
2024-11-20 13:58:14
232
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人