Skip to content

TIP

工作中,经常会遇到一些第三方库很符合业务,但又无法满足一些特殊的需求,重新去写一个完全符合业务要求的库又太浪费时间.下面我通过最近工作中遇到的问题举例如何解决

解决问题的方法

  • patch-package(推荐,但是这里不用这个方法)
  • 第三方库满足日常需求,并且需要在此基础上扩展,自行维护。思考特殊需求是否能够实现,能实现而第三方库又很符合,那么就把第三方库源码clone下来分析和实践

举例

WARNING

问题描述:最近公司有拖拽相关的业务,用到的技术的vuedraggable,但是vuedraggble这个组件库无法实现ui设计图的一些细节效果,如下图,拖拽时,跟随随便的dom的width无法减小。尝试了设置fallbackClass,但是当我把宽度缩小时那么就可能会错位

  • 思考:只要我拿到鼠标按下时的坐标,和那个跟随鼠标拖动的dom的宽度就可以处理好这个问题,这个dom的x坐标(这个坐标从父元素开始计算) = 鼠标按下时的x坐标 - vuedraggable这个dom距离浏览器左边的距离 - 跟随鼠标拖动的dom的宽度(为了方便直接传参到vuedraggablevuedraggable在实例化sortable时把参数带入)的一半
  • 尝试vuedraggble配置无果后,我决定把vuedraggleclone到本地
  • 看了一下vuedraggle这个库的源码基于sortable这个拖拽库
  • 然后我又把sortable这个库clone下来
  • 因为问题定位在坐标错误,所以我直接把问题定位在鼠标按下事件,直接搜索mousedown,找到_onTapStart方法,我打印了fallbackOffset的x坐标,发现这个坐标的x的0,不是距离浏览器左边的距离,父元素开始算
  • 于是我想只要拿到这个距离父元素的距离 - 跟随鼠标拖动的dom的宽度,那么就可以实现了
  • 问题解决,为了方便你可以自己搭建私有仓库,也可以直接放源代码文件在项目直接用

总结

遇到解决不了的问题,不要急着说实现不了,这样会让你在领导眼里减分。可以先看看库的源码,在学习大佬代码的同时解决问题。

上次更新于: