1 | # @livelybone/mouse-events
|
2 | [![NPM Version](http://img.shields.io/npm/v/@livelybone/mouse-events.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/mouse-events)
|
3 | [![Download Month](http://img.shields.io/npm/dm/@livelybone/mouse-events.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/mouse-events)
|
4 | ![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
|
5 | ![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
|
6 | ![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")
|
7 |
|
8 | > `pkg.module supported`, 天然支持 tree-shaking, 使用 es module 引用即可
|
9 |
|
10 | [English Document](./README.md)
|
11 |
|
12 | Some complex mouse events, such as dragMove event with deltaX/deltaY relative to mousedown/touchstart, mouse wheel with good compatibility ...
|
13 |
|
14 | ## repository
|
15 | https://github.com/livelybone/mouse-events.git
|
16 |
|
17 | ## Demo
|
18 | https://github.com/livelybone/mouse-events#readme
|
19 |
|
20 | ## Run Example
|
21 | 你可以通过运行项目的 example 来了解这个组件的使用,以下是启动步骤:
|
22 |
|
23 | 1. 克隆项目到本地 `git clone https://github.com/livelybone/mouse-events.git`
|
24 | 2. 进入本地克隆目录 `cd your-module-directory`
|
25 | 3. 安装项目依赖 `npm i`(使用 taobao 源: `npm i --registry=http://registry.npm.taobao.org`)
|
26 | 4. 启动服务 `npm run dev`
|
27 | 5. 在你的浏览器看 example (地址通常是 `http://127.0.0.1:3000/examples/test.html`)
|
28 |
|
29 | ## Installation
|
30 | ```bash
|
31 | npm i -S @livelybone/mouse-events
|
32 | ```
|
33 |
|
34 | ## Global name - The variable the module exported in `umd` bundle
|
35 | `MouseEvents`
|
36 |
|
37 | ## Interface
|
38 | 去 [index.d.ts](./index.d.ts) 查看可用方法和参数
|
39 |
|
40 | ## Usage
|
41 | ```typescript
|
42 | import { DragMove, Utils, MouseWheel, DragMoveEvent } from '@livelybone/mouse-events'
|
43 |
|
44 | const el = document.getElementById('el')
|
45 | let removeListener
|
46 |
|
47 | removeListener = MouseWheel.bind(el, (ev: MouseWheel.CustomWheelEvent) => {
|
48 | // ...
|
49 | })
|
50 | removeListener()
|
51 |
|
52 | removeListener = DragMove.bind(el, (ev: DragMoveEvent) => {
|
53 | // ...
|
54 | })
|
55 | removeListener()
|
56 |
|
57 | console.log(Utils.$isMobile)
|
58 | removeListener = Utils.$addListener(el, 'scroll', ev => {
|
59 | // ...
|
60 | })
|
61 | removeListener()
|
62 | ```
|
63 |
|
64 | ## CDN
|
65 | 在 HTML 文件中直接引用,你可以在 [CDN: unpkg](https://unpkg.com/@livelybone/mouse-events/lib/umd/) 看到你能用到的所有 js 脚本
|
66 | ```html
|
67 | <-- 然后使用你需要的 -->
|
68 | <script src="https://unpkg.com/@livelybone/mouse-events/lib/umd/<--module-->.js"></script>
|
69 | ```
|
70 |
|
71 | 或者,你也可以使用 [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/@livelybone/mouse-events/lib/umd/) 看到你能用到的所有 js 脚本
|
72 | ```html
|
73 | <script src="https://cdn.jsdelivr.net/npm/@livelybone/mouse-events/lib/umd/<--module-->.js"></script>
|
74 | ```
|