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`, 天然支持 tree-shaking, 使用 es module 引用即可
|
9 |
|
10 | [English Document](./README.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 | 你可以通过运行项目的 example 来了解这个组件的使用,以下是启动步骤:
|
22 |
|
23 | 1. 克隆项目到本地 `git clone https://github.com/livelybone/vue-scrollbar-live.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 vue-scrollbar-live
|
32 | ```
|
33 |
|
34 | ## Global name - The variable the module exported in `umd` bundle
|
35 | `VueScrollbar`
|
36 |
|
37 | ## Interface
|
38 | 去 [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 | ## CDN
|
54 | 在 HTML 文件中直接引用,你可以在 [CDN: unpkg](https://unpkg.com/vue-scrollbar-live/lib/umd/) 看到你能用到的所有 js 脚本
|
55 | ```html
|
56 | <-- 然后使用你需要的 -->
|
57 | <script src="https://unpkg.com/vue-scrollbar-live/lib/umd/<--module-->.js"></script>
|
58 | ```
|
59 |
|
60 | 或者,你也可以使用 [CDN: jsdelivr](https://cdn.jsdelivr.net/npm/vue-scrollbar-live/lib/umd/) 看到你能用到的所有 js 脚本
|
61 | ```html
|
62 | <script src="https://cdn.jsdelivr.net/npm/vue-scrollbar-live/lib/umd/<--module-->.js"></script>
|
63 | ```
|
64 |
|
65 | ## style
|
66 | Since 5.0.0, you don't need to import the css file in your project
|
67 |
|
68 | 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
|
69 |
|
70 | ## Props
|
71 | | Name | Type | DefaultValue | Description |
|
72 | | ------------- | ----------------------------------------- | -------------------- | ------------ |
|
73 | | `isMobile` | `Boolean` | `false` | Mark the device that component be used |
|
74 | | `maxHeight` | `[String, Number]` | none | Used to set style max-height of the wrap `.scrollbar-wrap`.$/ |
|
75 | | `scrollTo` | `[Number, Object]` | `0` | Used to set scroll y of the content wrap `.scrollbar-content`. value: `0 ~ 1`$/ |
|
76 | | `marginToWrap` | `Number` | `0` | Used to set scroll y of the content wrap `.scrollbar-content`. value: `0 ~ 1`$/ |
|
77 |
|
78 | ## Events
|
79 | | Name | EmittedData | Description |
|
80 | | --------------------- | --------------------- | ------------------------------------------------- |
|
81 | | `wrapClick` | `event` | `click` event of the wrap |
|
82 | | `reachBottom` | none | Triggered when the scrollbar reach the bottom |
|
83 | | `reachTop` | none | Triggered when the scrollbar reach the top |
|
84 | | `reachLeft` | none | Triggered when the scrollbar reach the left |
|
85 | | `reachRight` | none | Triggered when the scrollbar reach the right |
|
86 | | `startDrag` | `Object` | Drag start event of the scrollbar |
|
87 | | `endDrag` | `Object` | Drag end event of the scrollbar |
|
88 | | `scroll` | `Event` | Native scroll event |
|
89 | | `domChange` | none | Triggered when the dom that refer to this comp changed |
|
90 |
|
91 | ## QA
|
92 |
|
93 | 1. Error `Error: spawn node-sass ENOENT`
|
94 |
|
95 | > 你可能需要全局安装 node-sass,`npm i -g node-sass`
|
96 |
|
97 | 2. The domChange event not triggered when the sub dom changed.
|
98 |
|
99 | > Check that the current browser support MutationObserver API.
|
100 | > If not, you can use MutationObserver polyfill to solve this problem
|