- 博客(30)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React-dnd 拖拽排序，指定拖拽触发节点，拖拽预览图
参看沙盒示例，通过把每一列绑定drag drop，通过触发其中的事件，改变数据源的顺序实现动画排序，但是这个动画比较生硬，像要更好的更丝滑的体验需要使用Flip动画实现。如果拖拽的元素中有输入框之类的 需要鼠标触发的，会和拖拽事件有冲突，这时候要用到拖拽句柄，指定拖拽内容实现 拖拽的视图跟拖拽触发节点分离。
2025-03-13 14:45:01
227
原创 react-dnd 拖拽事件与输入框的文本选中冲突
当我们使用拖拽库的时候，往往会遇到拖拽的一个元素他的子孙元素有输入框类型的dom节点，当拖拽的事件绑定在该元素身上时候，发现子孙的输入框不能进行文本选中了，会按住鼠标去选中文本的时候会触发拖拽。不再将绑定事件绑到整个dom，使用拖拽句柄，在拖拽库中一般都有句柄的选项，可以把拖拽的事件绑定子孙的某个节点上，一般拖拽可以绑定。原理是在拖拽的事件中，判断当前触发拖拽事件的节点是否是 input框，如果是就阻止拖拽事件，自然就可以就行选择文本的操作了,实际的效果，鼠标无法选中文本输入框中的值。
2024-12-12 10:06:19
543
2
原创 前端根据目录生成模块化路由routes
根据约定大于配置的逻辑，如果目录结构约定俗成，前端是可以根据目录结构动态生成路由所需要的 route 结构的，这个过程是要在 进行，生成需要的代码，保证的代码正确即可主流的打包工具都有对应的方法读取文件目录Webpack: require.contextVite: import.meta.glob下面以Vite框架讲解例子，具体的需求就需要更复杂的处理，先进行约定：这是目录结构：直接进入Vite的入口文件，在路由渲染前生成routes 数组，可以看到结果是正确的，果然生成了要的数组，如果有特别的就在
2024-07-05 13:31:57
738
原创 Antd Table 表格 拖拽列宽
在实际的应用中，Table组件直接再次封装为可以拖动的组件供所有人使用，而且拖动后的布局是可以本地存储的，或者用接口去存也是一样，实现效果如下下面是实现的具体代码，封装了一个MyTable 组件，在这个组件中可以自定义antd Table组件的交互样式等。
2024-06-22 18:14:38
2969
3
原创 react 中使用 swiper
最近项目中需要用到轮播图，我立马想起了swiper，那么本文就来带大家体验一下如何在React中使用这个插件，使用的是的形式。需求非常简单，就是一个可以自动播放、点击切换的轮播图（跑马灯），可以同时展示n张图片，无限滚动。注意：如果是遇到纯文字的轮播效果，那我建议完全可以不用这么重的东西，直接使用antd中的Tab组件或者干脆自己写也能达到效果。
2024-06-03 15:30:51
3026
原创 react项目国际化
使用成熟的第三方库的国际化，可以直接使用封装好的方法，这个国际化的原理其实是使用了react 的第三方库react-intl，感觉主要比较好的就是使用其中的模版，它的本质还是通过了Provider的形式第一步新建文件夹，计划把所有的国际化相关的代码统统放到 src/locale 中以下是目录结构src-local-languages (所有的翻译文件)-Provider (国际化包裹组件，其中调用国际化接口并合并最后注入)-index.ts(到处一些公共的语言相关的变量和方法)
2024-06-03 02:05:28
1192
1
原创 axios取消请求，解决接口返回顺序错乱问题
下面的方案适用于系统中的某个请求的取消，项目的请求使用axios封装使用场景：当页面有多个 tab，例如年、月、日的列表数据，当点击切换的时候要获取对应的数据，此时如果快速点击在tab直接反复横跳会出现下面的问题：重复请求，切换了tab旧的页面已经看不见，没必要存留如果使用同一套UI组件，只是数据的改变，异步的原因可能当前tab请求已经结束，然后旧的请求后结束，导致当前的页面的数据渲染出来对应不上tab使用了去解决这个问题，下面讲解如何去封装。
2024-04-07 11:09:11
898
原创 antd Table 动态数据 合并单元格（合并行）
最近处理table的时候 遇到了要合并同一列的几行的情况，比如第一列的前面三行都是同一个对象的名字，此时合并显示比较妥当，但是数据是后端接口来的，而且可以筛选条件，搜索出来的数据就是动态的长度，可能这次需要合并前面的五行， 在原有的静态数据的合并的基础上，需要加上一个合并的逻辑代码。，遇到需要合并的行，设置rowSpan的数量为需要合并的行总数，然后把后面的rowSpan设置为0（不渲染该位置），否则这个表格就会乱套。下面就是我们合并了 ‘分类’ 列下面的 【1,2】行 ，【4,5,6】 行。
2024-01-06 15:26:05
10013
4
原创 React 元素拖拽教程 react-dnd 实现拖拽
h5原生的拖拽处理起来过分的繁琐，而社区已经提供了成熟的库react-dnd来帮助我们实现这些细节，我们只需要关心业务逻辑即可。下面的内容主要是适用于单个元素的拖拽，从一个容器中拖入另外一个容器中，没有实现真正的DOM层面的运动，实际是通过拖拽的事件监听操纵数据层的变化，从而触发页面的渲染导致得更新，注意！没有真正的dom移动那么炫酷的效果一个完整的拖拽流程分为两部分：拖动+放置下面进行展示。
2024-01-04 21:15:36
2071
7
原创 div/canvas实现放大镜、图片局部放大效果
放大图片的需求，一般是在原有的渲染之上，额外添加一个放大框，当鼠标在原图上移动，放大框内就以当前的鼠标为中心，局部放大一定范围，在淘宝商城中是常有的实现。下面将用两种实现。1、使用divimage标签，原理是放大框中有一个图片，这个图片是放大后的，放大框大小固定，图片超出的部分隐层，只需要调整图片的位置即可2、使用两个canvas其中一个用于渲染原图，另外一个做放大框，通过找到鼠标在原图位置，再选择出需要放大的范围，通过canvas方法渲染到放大框中原图：这个可以下载下来去测试代码。
2023-06-08 17:08:54
2849
2
原创 umi 嵌套路由 redirect 报错 Maximum update depth exceeded
umi4 父路由直接跳转到指定的子路由，umi 嵌套路由 redirect 报错 Maximum update depth exceeded
2023-05-06 17:37:06
1188
原创 一行代码解决input框只能输入两位小数的数字
使用elementUI 的 <el-input>标签，然后在oninput事件中使用正则表达式<el-input v-model="msg.pay" oninput = 'value = (value.match(/^[0-9]+(\.[0-9]{0,2})?/g) ?? [""])[0]' />
2022-04-30 09:00:00
933
原创 前端项目使用Leaflet引入离线地图
前端引入地图（内网离线）由于网络等限制，可能需要对地图的展示、打点、显示等操作我们的步骤是下载瓦片地图，将瓦片地图静态文件放置在服务器引入绘制地图的第三方插件，这里使用 Leaflet，在Js代码中初始化地图按照 Leaflet 开发文档行事1、下载瓦片地图这一步让后端去操作，下载后mysql会多一张数据表，导出成瓦片地图放在服务器1.1 下载工具需要使用下载工具：MapDownloader链接: https://pan.baidu.com/s/1LOZdklEtkF5lqa9
2022-04-01 11:11:31
12460
42
原创 Vue-router路由跳转 页面的状态保留 与 强制刷新页面
1、遇到的问题当我们使用 Vue 去实现一个比较大型的SPA单页面的应用时候，通常使用到了vue-router，此时会出现一种场景：左侧是菜单、右侧是页面内容，点击不同的菜单时有时候需要对页面的内容进行以下三种操作1. 保留状态（例如新增页面 需要保持状态）2. 刷新页面（列表页面）3. 根据情况进行 保留 或者 刷新（两种情况动态判断）对以上问题进行探讨，需要用到 vue-router 中的 <keep-alive> 标签 和 路由跳转携带参数 去解决问题。2、解决2.1 对.
2022-02-08 19:16:00
20606
4
原创 Vue自定义指令对页面内容鉴权
当我们使用vue写管理项目时候，经常会遇到需要对页面内的DOM节点进行鉴权的操作，常用的做法都是直接使用vuex 进行获取权限列表，今天觉得 太麻烦直接使用Vue 的自定义指令去做。直接在 main.js 文件中加入如下内容，通过去localstorage中拿到权限列表，这里不去Vuex中获取，因为我们刷新页面时候可能会重置vuex 仓库，丢失了权限，而且这样写就很方便，相当于全局自直接定义了一个方法（指令），直接在DOM挂载的生命周期去插入一些操作// 自定义指令Vue.directive('p.
2021-12-22 21:55:08
804
原创 React Hook 理解使用 useState、useEffect、useContext、useRef、自定义hook
React Hookreact hooks 的出现，是对 react 中无状态组件的一种升级，使得函数组件也能state 和 生命周期React Hooks 要解决的问题是状态共享，是继 render-props（渲染属性） 和 higher-order components（HOC；高阶组件） 之后的第三种状态逻辑复用方案，不会产生 JSX 嵌套地狱问题。1. useStatehooks 的能力，就是让我们在函数组件中使用 state, 就是通过 useState 来实现的const [
2021-07-28 11:35:35
1602
原创 前端查看节点已绑定的 addEventListener监听事件
项目中一个节点绑定了多个监听事件 addEventListener ，由于害怕监听事件没有很好的去除，强迫症觉得万一浪费了内存多不好，想查看一下节点绑定了什么监听事件，无奈JS没有很好的方法去发现，Chrome DevTools命令行API提供了多种方式来观察和检查事件监听器使用monitorEvents()监听某一类型的事件。使用unmonitorEvents()停止监听。使用getEventListeners()获取DOM元素的监听器。使用Event Listeners Inspector(.
2021-06-23 18:26:23
7740
原创 Element-ui 的全局引入和按需引入
在项目中我们通常需要使用到 Element- UI 这个组件库，想要随时在任意页面使用我们需要在全局引入，而且其中的组件并不全是都能被使用到，于是根据需要可以仅引入部分组件以 Vue项目 为例全局引入在入口文件 main.js 中写，引入全部组件 // main.js import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; impor.
2021-06-22 11:48:51
7118
1
原创 微信小程序 实时监听this.data数据变化
在Vue中，对于state中的数据 Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：监听属性 watch。在小程序的开发工作中遇到了同样的情况：**需要对当前页面data中的某一个或者几个数据进行实时监听**如果能有一个通用方法进行监听，可以统一解决类似的问题。
2021-06-21 16:50:52
13235
原创 React class组件、react-hook函数组件分别实现五子棋
react实现五子棋前言：使用create-react-app脚手架简单搭建，一共就用到一个组件：gobang.js，不用安装其他依赖，纯 js、css实现，组件代码放在最后了。分三步：1、画出了UI，棋盘棋子 。2、点击下棋落子。 3、落子后判断输赢效果如下目录结构1、画出UI在state中 初始化一个长度为20的得数组 border: Array(20).fill(null)通过数组去循环2次生成20*20的一个棋盘，在每个格子中放入一个<div className="
2021-04-08 20:48:28
999
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人