修改node_modules源码--view-design下拉框

2022-07-26 本文已影响0人习惯水文的前端苏

$\bullet$ 前言

今天接到的需求，增加一个下拉筛选条件，但是后端数据是一次性返回的，足足有几千条，故考虑做分页，但是view-design貌似不天然支持，故......

$\bullet$ 安装

npm install patch-package--save-dev

$\bullet$ 添加npm钩子

$\bullet$ 修改源码

$\ast$ 根据dist指向的文件，找到源码，为iview.js文件

$\ast$ 找到iSelect组件

1-添加usePaging属性，标识启用分页

2-为select添加类名，方便dom查找

3-监听滑动事件，到底对外发出通知

$\bullet$ 业务二次封装

根据usePaging对数据做截取，并记录currentPage

当监听到下拉后，修改page即可

筛选

为了保证和原来一样，需要在打开下拉时恢复

$\bullet$ 创建补丁

npx patch-package view-design

这将在项目中生成patchs文件

内容即变动代码

2022-7-29缺陷修复

复现

在中文输入法下进行搜索P，搜不到结果，但是如果直接英文下搜P，是正常的

解决

view-design里是获取的slots，并基于此对查询字符串做筛选的，但是打印发现获取的slots是错的

找到vue的set派发更新处，打上断点，发现会触发两次，其中的visible一次为true一次为false

这意味着，中英切换状态下，view-design会先关闭下拉弹窗，然后再重新打开，这就命中了我打开恢复数据的逻辑

故，找到view-design，将该默认行为禁用掉即可