说在前面
- node版本:v16.15.1
- npm版本:8.11.0
- pnpm版本:7.14.0
- element-plus版本:dev分支 48f837baf965e80b4a88c6ffe4d25a137ca77c92
场景
- 在使用
element-plus
的tree
组件时,发现其拖拽功能不太满足需求,在将节点拖拽出tree
节点范围后,依旧会将节点drop到对应位置,如下图:
- 由于未找到在不修改源代码的条件下的解决方式,于是决定改代码,自己打包。
步骤
-
Clone
git clone https://github.com/element-plus/element-plus.git cd element-plus
-
参考官方文档进行编译
npm install pnpm pnpm config set registry https://registry.npmmirror.com #设置国内源 pnpm build
-
修改代码
let indicatorTop = -9999 const distance = event.clientY - targetPosition.top // 代码比较简单 只是添加了判断x坐标的逻辑 const inRangeX = event.clientX >= targetPosition.left && event.clientX <= targetPosition.right - 100 if (distance < targetPosition.height * prevPercent && inRangeX) { dropType = 'before' } else if (distance > targetPosition.height * nextPercent && inRangeX) { dropType = 'after' } else if (dropInner && inRangeX) { dropType = 'inner' } else { dropType = 'none' }
-
测试
pnpm run docs:gen-locale pnpm run docs:dev
-
打包
测试完成后就可以打包,然后本地安装了cd /path/to/element-plus pnpm build cd dist/element-plus npm link npm pack # 执行完成后会生成一个压缩包,例如element-plus-0.0.0-dev.1.tgz
-
安装
# 进入需要用到element-plus的工程目录 cd /path/to/your_project npm install /path/to/element-plus/dist/element-plus/element-plus-0.0.0-dev.1.tgz
之后就可以正常使用了