深入理解 HTML 拖放 API:用 React Hook 打造交互式体验 在现代 Web 开发中,提供直观且用户友好的交互是至关重要的。HTML 拖放(Drag and Drop)API 就是一个强大的工具,它允许用户通过鼠标(或其他指针设备)选择可拖动元素,将其拖动到可放置区域,并释放以完成放置操作。这为文件上传、列表排序、界面定制等场景提供了自然的交互方式。 本文将深入探讨 HTML 拖放 API 的核心概念,并通过一个实际的 React 自定义 Hook (use 2025-04-22 #前端开发 #React #HTML5 #TypeScript #Drag and Drop API #React Hooks #Web交互 #用户体验 #自定义Hook #DOM事件
解密 CSS overflow:为何 auto 滚动条会“捣乱”以及 visible 为何“失效”? 解密 CSS overflow:为何 auto 滚动条会“捣乱”以及 visible 为何“失效”?大家好!今天我们来深入探讨 CSS 中一个既基础又充满“玄机”的属性——overflow。你可能遇到过这两种令人费解的情况: 只设置了 overflow-y: auto,为什么有时会意外出现水平滚动条? 设置了 overflow-y: auto(或 scroll/hidden),但同时设 2025-04-22 #CSS #布局 #前端开发 #浏览器渲染 #overflow #BFC #滚动条 #scrollbar-gutter #CSS规范 #Web开发
深入理解 css padding百分比规则 深入理解 CSS Padding 百分比计算规则核心规则W3C 规范明确规定: Percentages: refer to width of containing block (百分比值:参照包含块的宽度) 这意味着,无论你设置的是 padding-left, padding-right, padding-top 还是 padding-bottom 的百分比值,其计算基准 始终 是该元素 包含 2025-04-22 #CSS #前端开发 #响应式设计 #布局技巧 #padding #盒模型 #W3C规范 #宽高比布局 #工程实践 #CSS计算规则
解决 Chrome 扩展中 URL 参数解析问题:从 useParams 到 URLSearchParams 的优雅转变 解决 Chrome 扩展中 URL 参数解析问题:从 useParams 到 URLSearchParams 的优雅转变问题背景在开发 Chrome 扩展时,我们遇到了一个有趣的问题:在扩展页面中无法正确获取 URL 参数。具体来说,当用户访问类似这样的 URL 时: 12chrome-extension://ikagihfgkipghifjdobklmpkhabjjmoi/index.html? 2025-04-22 #前端开发 #Chrome Extension #React #URLSearchParams #React Router #URL参数解析 #Web API #错误处理 #最佳实践 #技术调试
React 状态管理:优雅处理异步数据的初始化延迟 React 状态管理:优雅处理异步数据的初始化延迟在现代 Web 开发中,尤其是使用 React 构建的单页应用,异步数据获取是家常便饭。我们经常需要从后端 API 获取数据,然后更新组件状态以渲染 UI。然而,一个常见且容易被忽视的问题是:在异步数据返回之前,组件可能已经尝试访问这些数据,从而导致错误。 本文将探讨一个具体的案例:executionRecord 状态初始化延迟导致的问题,并分享如 2025-04-22 #前端开发 #React #错误处理 #最佳实践 #useEffect #状态管理 #异步编程 #TypeScript #useState #组件设计
爬虫基本功——加密数据定位 企x科技——无混淆js的数据解密方法一:打开抓包工具,切换列表抓取到数据后查看响应体发现有encrypt_data字段内容被加密。要找出加密函数可以在搜索栏直接搜索该字段进入到js内格式化后搜索encrypt_data字段在可疑处打断点随后分析即可 小技巧对于大部分请求如果断点断下后若不确定是否是自己跟踪的接口,可以使用调试工具的XHR功能来确定 烯x数据——无混淆js的数据解密方法二 解密请求 2024-10-11
电子书列表功能开发 电子书资源电子书资源: 解压后的电子书:链接:链接提取码:8p6d解析epub文件: 根据META-INF找到content.opf文件,content.opf(xml)文件存放了电子书的配置部分内容示例:目录文件toc.ncx 静态资源服务器搭建(Nginx)将下载下来的电子书放置在静态资源服务器内管理 电子书列表模块在routes/modules下新建book.ts路由并引入 2024-10-10 #web #Vue.js #Typescript #Vite #Nest.js
原神大地图——3.地图与UI交互 地名动态渲染实现根据地图缩放大小不同,地名展示也不同。home store中封装mapAnchorList 123function setMapAnchorList(data: any[]) { mapAnchorList.value = data} 将其他组件中的mapAnchorList ref替换为store中的ref。然后渲染一级地名显示效果:接着开发动态渲染二级 2024-10-05 #web #Vue.js #Typescript #Vite #Leaflet
原神大地图——2.UI交互层开发 ** 注意!!!** map与ui-layer应该具有同一个父元素,而不是父子关系,否则map会捕获所有鼠标事件 本节将开发 整体ui搭建首先编写左侧filter-config代码 12345678910111213141516171819202122232425262728293031<template> <div id="map-container" 2024-10-01 #web #Vue.js #Typescript #Vite #Leaflet
原神大地图——1.绘制大地图 1.快速使用leaflet使用leafleta.新建地图b.在地图上绘制图形c.使用提示信息d.处理画布事件 2.项目工程准备准备如下的目录结构并安装好leaflet依赖,初始化leaflet画布 123456789101112function init() { let map = L.map('map', { center: [0, 0 2024-10-01 #web #Vue.js #Typescript #Vite #Leaflet