1 | # vue-scrollbar-live
|
2 | [![NPM Version](http://img.shields.io/npm/v/vue-scrollbar-live.svg?style=flat-square)](https://www.npmjs.com/package/vue-scrollbar-live)
|
3 | [![Download Month](http://img.shields.io/npm/dm/vue-scrollbar-live.svg?style=flat-square)](https://www.npmjs.com/package/vue-scrollbar-live)
|
4 | ![gzip with dependencies: 4.9kb](https://img.shields.io/badge/gzip--with--dependencies-4.9kb-brightgreen.svg "gzip with dependencies: 4.9kb")
|
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`, which means that you can apply tree-shaking in you project
|
9 |
|
10 | [中文文档](./README-CN.md)
|
11 |
|
12 | A vue scrollbar component, support SSR.
|
13 |
|
14 | ## repository
|
15 | https://github.com/livelybone/vue-scrollbar-live.git
|
16 |
|
17 | ## Demo
|
18 | https://github.com/livelybone/vue-scrollbar-live#readme
|
19 |
|
20 | ## Run Example
|
21 | you can see the usage by run the example of the module, here is the step:
|
22 |
|
23 | 1. Clone the library `git clone https://github.com/livelybone/vue-scrollbar-live.git`
|
24 | 2. Go to the directory `cd your-module-directory`
|
25 | 3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
|
26 | 4. Open service `npm run dev`
|
27 | 5. See the example(usually is `http://127.0.0.1:3000/examples/test.html`) in your browser
|
28 |
|
29 | ## Installation
|
30 | ```bash
|
31 | npm i -S vue-scrollbar-live
|
32 | ```
|
33 |
|
34 | ## Global name - The variable the module exported in `umd` bundle
|
35 | `VueScrollbar`
|
36 |
|
37 | ## Interface
|
38 | See what method or params you can use in [index.d.ts](./index.d.ts)
|
39 |
|
40 | ## Usage
|
41 | ```js
|
42 | import VueScrollbar from 'vue-scrollbar-live';
|
43 |
|
44 | // Global register
|
45 | Vue.component('scrollbar', VueScrollbar);
|
46 |
|
47 | // Local register
|
48 | new Vue({
|
49 | components:{VueScrollbar}
|
50 | })
|
51 | ```
|
52 |
|
53 | when you want to set this module as external while you are developing another module, you should import it like this:
|
54 | ```js
|
55 | import * as VueScrollbar from 'vue-scrollbar-live'
|
56 |
|
57 | // then use it by need
|
58 | ```
|
59 |
|
60 | ## CDN
|
61 | Use in html, see what you can use in [CDN: unpkg](https://unpkg.com/vue-scrollbar-live/lib/umd/)
|
62 | ```html
|
63 | <-- use what you want -->
|
64 | <script src="https://unpkg.com/vue-scrollbar-live/lib/umd/<--module-->.js"></script>
|
65 | ```
|
66 |
|
67 | Or,see what you can use in [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/vue-scrollbar-live/lib/umd/)
|
68 | ```html
|
69 | <script src="https://cdn.jsdelivr.net/npm/vue-scrollbar-live/lib/umd/<--module-->.js"></script>
|
70 | ```
|
71 |
|
72 | ## style
|
73 | Since 5.0.0, you don't need to import the css file in your project
|
74 |
|
75 | For rewrite style, you can copy the `index.scss` or `index.css` file, rewrite it use `!important`(this is necessary), and the import the file in your project
|
76 |
|
77 | ## Props
|
78 | | Name | Type | DefaultValue | Description |
|
79 | | ------------- | ----------------------------------------- | -------------------- | ------------ |
|
80 | | `isMobile` | `Boolean` | `false` | Mark the device that component be used |
|
81 | | `maxHeight` | `[String, Number]` | none | Used to set style max-height of the wrap `.scrollbar-wrap`.$/ |
|
82 | | `scrollTo` | `[Number, Object]` | `0` | Used to set scroll y of the content wrap `.scrollbar-content`. value: `0 ~ 1`$/ |
|
83 | | `marginToWrap` | `Number` | `0` | Used to set scroll y of the content wrap `.scrollbar-content`. value: `0 ~ 1`$/ |
|
84 |
|
85 | ## Events
|
86 | | Name | EmittedData | Description |
|
87 | | --------------------- | --------------------- | ------------------------------------------------- |
|
88 | | `wrapClick` | `event` | `click` event of the wrap |
|
89 | | `reachBottom` | none | Triggered when the scrollbar reach the bottom |
|
90 | | `reachTop` | none | Triggered when the scrollbar reach the top |
|
91 | | `reachLeft` | none | Triggered when the scrollbar reach the left |
|
92 | | `reachRight` | none | Triggered when the scrollbar reach the right |
|
93 | | `startDrag` | `Object` | Drag start event of the scrollbar |
|
94 | | `endDrag` | `Object` | Drag end event of the scrollbar |
|
95 | | `scroll` | `Event` | Native scroll event |
|
96 | | `domChange` | none | Triggered when the dom that refer to this comp changed |
|
97 |
|
98 | ## QA
|
99 |
|
100 | 1. Error `Error: spawn node-sass ENOENT`
|
101 |
|
102 | > You may need install node-sass globally, `npm i -g node-sass`
|
103 |
|
104 | 2. The domChange event not triggered when the sub dom changed.
|
105 |
|
106 | > Check that the current browser support MutationObserver API.
|
107 | > If not, you can use MutationObserver polyfill to solve this problem
|