@amaoaaaaa/vue-drag-scroll/dist/drag-scroll.umd.js

一个 Vue 3 指令，支持通过拖拽滚动容器内容，支持指定子容器。

(function(s,r){typeof exports=="object"&&typeof module<"u"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(s=typeof globalThis<"u"?globalThis:s||self,r(s.VueDragScroll={}))})(this,function(s){"use strict";const r=new WeakMap,u={mounted(o,n){const e={isDragging:!1,startX:0,startY:0,startPageX:0,startPageY:0,scrollLeft:0,scrollTop:0,target:null,moved:!1,velocityX:0,velocityY:0,lastTime:0,lastX:0,lastY:0,inertiaFrame:null,onMouseMove:()=>{},onMouseUp:()=>{},onMouseDown:()=>{}},g=()=>{const t=n.value;return typeof t=="string"?o.querySelector(t):o},c=()=>{e.inertiaFrame!=null&&(cancelAnimationFrame(e.inertiaFrame),e.inertiaFrame=null)},v=()=>{c();const t=.95,a=.5,i=()=>{if(e.target){if(e.velocityX*=t,e.velocityY*=t,Math.abs(e.velocityX)<a&&Math.abs(e.velocityY)<a){c();return}e.target.scrollLeft-=e.velocityX,e.target.scrollTop-=e.velocityY,e.inertiaFrame=requestAnimationFrame(i)}};e.inertiaFrame=requestAnimationFrame(i)},p=()=>{e.isDragging=!1,document.removeEventListener("mousemove",e.onMouseMove),document.removeEventListener("mouseup",e.onMouseUp)};e.onMouseDown=t=>{e.target=g(),e.target&&(c(),e.isDragging=!0,e.moved=!1,e.startX=t.clientX,e.startY=t.clientY,e.startPageX=t.pageX,e.startPageY=t.pageY,e.scrollLeft=e.target.scrollLeft,e.scrollTop=e.target.scrollTop,e.lastTime=performance.now(),e.lastX=t.clientX,e.lastY=t.clientY,document.addEventListener("mousemove",e.onMouseMove),document.addEventListener("mouseup",e.onMouseUp))},e.onMouseMove=t=>{if(!e.isDragging||!e.target)return;if(t.pageX===e.startPageX&&t.pageY===e.startPageY){t.preventDefault();return}const a=performance.now(),i=t.clientX-e.startX,l=t.clientY-e.startY;(Math.abs(i)>3||Math.abs(l)>3)&&(e.moved=!0);const f=t.clientX-e.lastX,M=t.clientY-e.lastY,m=a-e.lastTime||16;e.velocityX=f/m*16,e.velocityY=M/m*16,e.lastX=t.clientX,e.lastY=t.clientY,e.lastTime=a,e.target.scrollLeft=e.scrollLeft-i,e.target.scrollTop=e.scrollTop-l},e.onMouseUp=()=>{if(e.isDragging&&e.moved){const t=l=>{l.stopImmediatePropagation(),l.preventDefault(),document.removeEventListener("click",t,!0)};document.addEventListener("click",t,!0),Math.sqrt(e.velocityX**2+e.velocityY**2)>1.5&&v()}p()},o.addEventListener("mousedown",e.onMouseDown),r.set(o,e)},unmounted(o){const n=r.get(o);n&&(o.removeEventListener("mousedown",n.onMouseDown),document.removeEventListener("mousemove",n.onMouseMove),document.removeEventListener("mouseup",n.onMouseUp),n.inertiaFrame!==null&&cancelAnimationFrame(n.inertiaFrame),r.delete(o))}},d={install(o){o.directive("drag-scroll",u)}};s.default=d,s.dragScroll=u,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});