效果图

代码

export function dragScrollBar(app: App<Element>) {
 
    let initNum=0
 
    app.directive('dragScrollBar', (el, binding) => {
 
   //binding el-scrollbar的ref
   //将setScrollTop||setScrollLeft (el-scrollbar的手动控制滚动条位置的api具体可以看文档)                            
 
        el.onmousedown = (e) => {
           
            const disX = e.pageX+initNum 
            
            document.onmousemove = (de) => {
                
                initNum=disX - de.pageX 
                
                binding.value!.setScrollLeft(disX - de.pageX)
 
            }
 
            document.onmouseup = (de) => {
 
                document.onmousemove = document.onmouseup = null
 
            }
 
          }
 
      })
  }

思路

1. 鼠标按下事件 记录按下的位置
2. 鼠标滑动事件 获取实时移动数据 disX - de.pageX 就是偏移数据
3. 自定义指令传参 将滚动条的ref 传过来 实时赋值
4. 鼠标放开 将事件移除
5. initNum是记录滑动的偏移 (规避每次滑动 setScrollLeft为0)
6. 大致跟拖拽Dialog原理差不多