{"_id":"@amaoaaaaa/vue-drag-scroll","_rev":"2-39555024d1590ad4c5ff943aba4f715a","name":"@amaoaaaaa/vue-drag-scroll","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.0":{"name":"@amaoaaaaa/vue-drag-scroll","version":"0.0.0","keywords":["vue","directive","drag","scroll","vue3","drag-scroll"],"author":{"name":"amao"},"license":"MIT","_id":"@amaoaaaaa/vue-drag-scroll@0.0.0","maintainers":[{"name":"amaoaaaaa","email":"z.d.mao@qq.com"}],"homepage":"https://github.com/amaoaaaaa/vue-drag-scroll#readme","bugs":{"url":"https://github.com/amaoaaaaa/vue-drag-scroll/issues"},"dist":{"shasum":"3e1734668e1793691f9be0951b6268a6a74c0198","tarball":"https://registry.npmjs.org/@amaoaaaaa/vue-drag-scroll/-/vue-drag-scroll-0.0.0.tgz","fileCount":6,"integrity":"sha512-CsU0iFbspq16u9l9vLFExPgVa7ltMUQ45SlrDVnhiSCPFzHMvYUK+qnRJrNdZeueENghxKxJjQ9YygZfP4XRMA==","signatures":[{"sig":"MEYCIQDekl2txNzZtU9A7M8b11r/gcX5K/bnI23iRl7AsdBefgIhAPg0yuifhemebf3o4oYYwMO5HoX5XpybH152ZmspcyeQ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":10879},"main":"dist/drag-scroll.umd.js","types":"dist/index.d.ts","module":"dist/drag-scroll.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/drag-scroll.es.js","require":"./dist/drag-scroll.umd.js"}},"gitHead":"dbcd1a2ee3e526cf5c60b6a0d31ddf40738df1fd","scripts":{"dev":"vite","build":"vite build","publish!":"npm publish --access public","prepublishOnly":"npm run build"},"_npmUser":{"name":"amaoaaaaa","email":"z.d.mao@qq.com"},"repository":{"url":"git+https://github.com/amaoaaaaa/vue-drag-scroll.git","type":"git"},"_npmVersion":"10.9.2","description":"一个 Vue 3 指令，支持通过拖拽滚动容器内容，支持指定子容器。","directories":{},"_nodeVersion":"20.18.2","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.2.0","vite":"^5.0.0","typescript":"^5.0.0","@types/node":"^24.0.13","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"vue":"^3.2.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-drag-scroll_0.0.0_1752550435502_0.6361989356489182","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@amaoaaaaa/vue-drag-scroll","version":"0.1.0","description":"一个 Vue 3 指令，支持通过拖拽滚动容器内容，支持指定子容器。","main":"dist/drag-scroll.umd.js","module":"dist/drag-scroll.es.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/drag-scroll.es.js","require":"./dist/drag-scroll.umd.js","types":"./dist/index.d.ts"}},"scripts":{"dev":"vite","build":"vite build","publish!:patch":"npm run build && npm version patch && npm run publish!","publish!:minor":"npm run build && npm version minor && npm run publish!","publish!:major":"npm run build && npm version major && npm run publish!","publish!":"npm publish --access public"},"repository":{"type":"git","url":"git+https://github.com/amaoaaaaa/vue-drag-scroll.git"},"keywords":["vue","directive","drag","scroll","vue3","drag-scroll"],"author":{"name":"amao"},"license":"MIT","peerDependencies":{"vue":"^3.2.0"},"devDependencies":{"@types/node":"^24.0.13","typescript":"^5.0.0","vite":"^5.0.0","vite-plugin-dts":"^4.5.4","vue":"^3.2.0"},"_id":"@amaoaaaaa/vue-drag-scroll@0.1.0","gitHead":"838283f6743d3bdfef1c98fb5ff282b86973a82f","bugs":{"url":"https://github.com/amaoaaaaa/vue-drag-scroll/issues"},"homepage":"https://github.com/amaoaaaaa/vue-drag-scroll#readme","_nodeVersion":"20.18.2","_npmVersion":"10.9.2","dist":{"integrity":"sha512-9lRf2uWM3ymZuOtDCDuunQ7iMAVtzHMFIoVMw3Wlq50oA6wGuWd5NNiMn99cbaUJ+RK/8QRreyaR8CvKI7FA5A==","shasum":"efbd8532a74a89b791c1a0eb62fdacc5b5fd18f7","tarball":"https://registry.npmjs.org/@amaoaaaaa/vue-drag-scroll/-/vue-drag-scroll-0.1.0.tgz","fileCount":6,"unpackedSize":11195,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDF6wDspfhq1JxJzjrry73m7o55tcRZyKxdr2gpUXSfeAiEA8iC5FlkQXZcJSuZIdmTNchkdxSPJwYUs2o+89TeVefs="}]},"_npmUser":{"name":"amaoaaaaa","email":"z.d.mao@qq.com"},"directories":{},"maintainers":[{"name":"amaoaaaaa","email":"z.d.mao@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-drag-scroll_0.1.0_1752559953766_0.004006334350200813"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-15T03:33:55.394Z","modified":"2025-07-15T06:12:34.109Z","0.0.0":"2025-07-15T03:33:55.678Z","0.1.0":"2025-07-15T06:12:33.925Z"},"bugs":{"url":"https://github.com/amaoaaaaa/vue-drag-scroll/issues"},"author":{"name":"amao"},"license":"MIT","homepage":"https://github.com/amaoaaaaa/vue-drag-scroll#readme","keywords":["vue","directive","drag","scroll","vue3","drag-scroll"],"repository":{"type":"git","url":"git+https://github.com/amaoaaaaa/vue-drag-scroll.git"},"description":"一个 Vue 3 指令，支持通过拖拽滚动容器内容，支持指定子容器。","maintainers":[{"name":"amaoaaaaa","email":"z.d.mao@qq.com"}],"readme":"# vue-drag-scroll\r\n\r\n🖱️ 一个轻量级的 Vue 3 自定义指令，用于通过鼠标拖拽滚动容器内容。支持传入子元素选择器，自动清理监听，含惯性滚动效果。\r\n\r\n## ✨ 特性\r\n\r\n- 支持任意容器通过鼠标拖拽进行滚动\r\n- 可传入子元素选择器（例如 `.el-scrollbar__wrap`）控制具体滚动目标\r\n- 自动清除事件监听，防止内存泄漏\r\n- 支持惯性滚动体验\r\n- 类型完善，支持 TypeScript\r\n\r\n## 📦 安装\r\n\r\n```bash\r\nnpm install vue-drag-scroll\r\n\r\n# 或者使用 pnpm / yarn\r\npnpm add vue-drag-scroll\r\n```\r\n\r\n## 🔧 使用方式\r\n\r\n### 注册指令\r\n\r\n```ts\r\n// main.ts\r\n\r\nimport dragScroll from '@amaoaaaaa/vue-drag-scroll';\r\napp.use(dragScroll);\r\n\r\n// 或者\r\nimport { dragScroll } from '@amaoaaaaa/vue-drag-scroll';\r\napp.directive('drag-scroll', dragScroll);\r\n```\r\n\r\n### 示例 1：滚动自己的内容\r\n\r\n```vue\r\n<template>\r\n    <div v-drag-scroll class=\"overflow-auto h-96 bg-gray-100\">\r\n        <div class=\"w-[2000px] h-[2000px]\">Huge content...</div>\r\n    </div>\r\n</template>\r\n```\r\n\r\n### 示例 2：滚动内部子元素（如 Element Plus 的 el-scrollbar）\r\n\r\n```vue\r\n<template>\r\n    <el-scrollbar v-drag-scroll=\"'.el-scrollbar__wrap'\" always height=\"300px\">\r\n        <div style=\"width: 2000px\">Some long content</div>\r\n    </el-scrollbar>\r\n</template>\r\n```\r\n\r\n## ⚙️ 参数说明\r\n\r\n| 参数类型  |              描述               | 是否必填 |           示例          |\r\n| -------- | ------------------------------- | ------- | ----------------------- |\r\n| `string` | 子元素选择器，用于选择内部滚动容器 |   否    | `'.el-scrollbar__wrap'` |\r\n\r\n不传参数时，默认滚动当前绑定元素本身。\r\n\r\n## 💡 类型支持（TypeScript）\r\n\r\n你可以选择拓展 Vue 的类型支持：\r\n\r\n```ts\r\n// types/vue-shim.d.ts\r\nimport { dragScroll } from 'vue-drag-scroll'\r\n\r\ndeclare module '@vue/runtime-core' {\r\n    export interface ComponentCustomProperties {\r\n        /**\r\n         * 自定义指令：v-drag-scroll\r\n         *\r\n         * @description 拖拽滚动内容\r\n         *\r\n         * @example\r\n         * // 滚动自己的内容，指令不需要传参数\r\n         * <div v-drag-scroll class=\"h-96 bg-red-500/50 overflow-auto\">\r\n         *     <p class=\"w-[800px]\">{{ Random.csentence(99999) }}</p>\r\n         * </div>\r\n         *\r\n         * @example\r\n         * // 滚动内部子元素，参数传子元素的选择器\r\n         * <el-scrollbar v-drag-scroll=\"'.el-scrollbar__wrap'\" always class=\"h-60\">\r\n         *     ......\r\n         * </el-scrollbar>\r\n         */\r\n        vDragScroll: typeof dragScroll;\r\n    }\r\n}\r\n```","readmeFilename":"README.md"}