Skip to content

Commit c3ef947

Browse files
tangbctangbc
committed
Update readme
1 parent f9b1103 commit c3ef947

File tree

1 file changed

+139
-25
lines changed

1 file changed

+139
-25
lines changed

‎README.md

Lines changed: 139 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,15 @@
2929
* [What's new in v2.0](#whats-new-in-v20)
3030
* [Simple usage](#simple-usage)
3131
* [**Props type**](#props-type)
32+
* [Required props](#required-props)
33+
* [Optional props](#optional-props)
34+
* [Public methods](#public-methods)
3235
* [Attentions](#attentions)
33-
* [Contributions](#contributions)
34-
* [Changelogs](#changelogs)
3536

3637

3738
## Advantages
3839

39-
* Tiny and very very easy to use.
40+
* Tiny, simple and very very easy to use.
4041

4142
* Big data list with high render performance and efficient.
4243

@@ -66,7 +67,7 @@ Root component:
6667
<template>
6768
<div>
6869
<virtual-list
69-
:size="60" // just assign a estimate or average value.
70+
:size="60" // You dont know? no problem, just assign a estimate value!
7071
:keeps="30"
7172
:data-key="'uid'"
7273
:data-sources="items"
@@ -116,7 +117,7 @@ Item component:
116117
</script>
117118
```
118119

119-
More usages or getting start you can refer to these clearly [examples](https://tangbc.github.com/vue-virtual-scroll-list).
120+
More usages or getting start you can refer to these clearly [examples](https://github.com/tangbc/vue-virtual-scroll-list/tree/master/example/src/views).
120121

121122

122123
## Props type
@@ -133,26 +134,139 @@ More usages or getting start you can refer to these clearly [examples](https://t
133134

134135
### Optional props
135136

136-
| **&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;** | **Type** | **Default** | **Description** |
137-
|--------------------|----------|----------|---------------------------------------------------------------------------|
138-
| `extra-props` | Object | {} | Extra props assign to item component. |
139-
| `root-tag` | String | div | Root element tag name. |
140-
| `wrap-tag` | String | div | List wrapper element tag name. |
141-
| `item-tag` | String | div | Item wrapper element tag name. |
142-
| `wrap-class` | String | | List wrapper element class name. |
143-
| `item-class` | String | | Item wrapper element class name. |
144-
| `start` | Number | 0 | Setting scroll stay start index. |
145-
| `offset` | Number | 0 | Setting scroll stay offset. |
146-
| `direction` | String | vertical | Scroll direction, available values are `vertical` and `horizontal`. |
147-
| `scroll` | Function | | Emited when scrolling, param `(event, range)`. |
148-
| `totop` | Function | | Emited when scrolled to top or left, param `(event, range)`. |
149-
| `tobottom` | Function | | Emited when scrolled to bottom or right, param `(event, range)`. |
150-
| `top-threshold` | Number | 0 | The threshold to emit `totop` event, attention to multiple calls. |
151-
| `bottom-threshold` | Number | 0 | The threshold to emit `tobottom` event, attention to multiple calls. |
152-
| `header-tag` | String | div | For using header slot, header slot wrapper element tag name. |
153-
| `footer-tag` | String | div | For using footer slot, footer slot wrapper element tag name. |
154-
| `header-class` | String | | For using header slot, header slot wrapper element class name. |
155-
| `footer-class` | String | | For using footer slot, footer slot wrapper element class name. |
137+
<details>
138+
<summary><strong>Commonly used</strong></summary>
139+
<p></p>
140+
<table>
141+
<tr>
142+
<th>Props</th>
143+
<th>Type</th>
144+
<th>default</th>
145+
<th>description</th>
146+
</tr>
147+
<tr>
148+
<td><code>extra-props</code></td>
149+
<td>Object</td>
150+
<td>{}</td>
151+
<td>Extra props assign to item component.</td>
152+
</tr>
153+
<tr>
154+
<td><code>start</code></td>
155+
<td>Number</td>
156+
<td>0</td>
157+
<td>Setting scroll stay start index.</td>
158+
</tr>
159+
<tr>
160+
<td><code>offset</code></td>
161+
<td>Number</td>
162+
<td>0</td>
163+
<td>Setting scroll stay offset.</td>
164+
</tr>
165+
<tr>
166+
<td><code>totop</code></td>
167+
<td>Function</td>
168+
<td></td>
169+
<td>Emited when scrolled to top or left, param <code>(event, range)</code>.</td>
170+
</tr>
171+
<tr>
172+
<td><code>tobottom</code></td>
173+
<td>Function</td>
174+
<td></td>
175+
<td>Emited when scrolled to bottom or right, param <code>(event, range)</code>.</td>
176+
</tr>
177+
<tr>
178+
<td><code>scroll</code></td>
179+
<td>Function</td>
180+
<td></td>
181+
<td>Emited when scrolling, param <code>(event, range)</code>.</td>
182+
</tr>
183+
</table>
184+
</details>
185+
186+
<details>
187+
<summary><strong>Uncommonly used</strong></summary>
188+
<p></p>
189+
<table>
190+
<tr>
191+
<th>Props</th>
192+
<th>Type</th>
193+
<th>default</th>
194+
<th>description</th>
195+
</tr>
196+
<tr>
197+
<td><code>root-tag</code></td>
198+
<td>String</td>
199+
<td>div</td>
200+
<td>Root element tag name.</td>
201+
</tr>
202+
<tr>
203+
<td><code>wrap-tag</code></td>
204+
<td>String</td>
205+
<td>div</td>
206+
<td>List wrapper element tag name.</td>
207+
</tr>
208+
<tr>
209+
<td><code>item-tag</code></td>
210+
<td>String</td>
211+
<td>div</td>
212+
<td>Item wrapper element tag name.</td>
213+
</tr>
214+
<tr>
215+
<td><code>wrap-class</code></td>
216+
<td>String</td>
217+
<td></td>
218+
<td>List wrapper element class name.</td>
219+
</tr>
220+
<tr>
221+
<td><code>item-class</code></td>
222+
<td>String</td>
223+
<td></td>
224+
<td>Item wrapper element class name.</td>
225+
</tr>
226+
<tr>
227+
<td><code>direction</code></td>
228+
<td>String</td>
229+
<td>vertical</td>
230+
<td>Scroll direction, available values are <code>vertical</code> and <code>horizontal</code></td>
231+
</tr>
232+
<tr>
233+
<td><code>top-threshold</code></td>
234+
<td>Number</td>
235+
<td>0</td>
236+
<td>The threshold to emit <code>totop</code> event, attention to multiple calls.</td>
237+
</tr>
238+
<tr>
239+
<td><code>bottom-threshold</code></td>
240+
<td>Number</td>
241+
<td>0</td>
242+
<td>The threshold to emit <code>tobottom</code> event, attention to multiple calls.</td>
243+
</tr>
244+
<tr>
245+
<td><code>header-tag</code></td>
246+
<td>String</td>
247+
<td>div</td>
248+
<td>For using header slot, header slot wrapper element tag name.</td>
249+
</tr>
250+
<tr>
251+
<td><code>footer-tag</code></td>
252+
<td>String</td>
253+
<td>div</td>
254+
<td>For using footer slot, footer slot wrapper element tag name.</td>
255+
</tr>
256+
<tr>
257+
<td><code>header-class</code></td>
258+
<td>String</td>
259+
<td></td>
260+
<td>For using header slot, header slot wrapper element class name.</td>
261+
</tr>
262+
<tr>
263+
<td><code>footer-class</code></td>
264+
<td>String</td>
265+
<td></td>
266+
<td>For using footer slot, footer slot wrapper element class name.</td>
267+
</tr>
268+
</table>
269+
</details>
156270

157271
### Public methods
158272

0 commit comments

Comments
 (0)