Support item-class-add function

Author: tangbc

README.md

@@ -165,12 +165,6 @@ More usages or getting start you can refer to these clearly [examples](https://g
       <td></td>
       <td>Emited when scrolled to bottom or right, param <code>(event, range)</code>.</td>
     </tr>
-    <tr>
-      <td><code>resized</code></td>
-      <td>Event</td>
-      <td></td>
-      <td>Emited when each item resized (mounted), param <code>(id, size)</code>.</td>
-    </tr>
   </table>
 </details>
 
@@ -196,6 +190,12 @@ More usages or getting start you can refer to these clearly [examples](https://g
       <td>0</td>
       <td>Setting scroll stay offset.</td>
     </tr>
+    <tr>
+      <td><code>resized</code></td>
+      <td>Event</td>
+      <td></td>
+      <td>Emited when each item resized (mounted), param <code>(id, size)</code>.</td>
+    </tr>
     <tr>
       <td><code>root-tag</code></td>
       <td>String</td>
@@ -226,6 +226,12 @@ More usages or getting start you can refer to these clearly [examples](https://g
       <td></td>
       <td>Item wrapper element class name.</td>
     </tr>
+    <tr>
+      <td><code>item-class-add</code></td>
+      <td>Function</td>
+      <td></td>
+      <td>A function that you can return extra class (String) to item wrapper element, param <code>(index)</code>.</td>
+    </tr>
     <tr>
       <td><code>header-tag</code></td>
       <td>String</td>
@@ -287,7 +293,7 @@ Here are some usefull public methods you can call via [`ref`](https://vuejs.org/
 
 * `getSizes()`: get the total number of stored (rendered) items.
 
-* `getClientSize()`: get wrapper client viewport size (width or height).
+* `getClientSize()`: get wrapper element client viewport size (width or height).
 
 * `getScrollSize()`: get all scroll size (scrollHeight or scrollWidth).
 

src/index.js

@@ -227,7 +227,6 @@ const VirtualList = Vue.component('virtual-list', {
         if (dataSource) {
           if (dataSource[dataKey]) {
             slots.push(h(Item, {
-              class: itemClass,
               props: {
                 index,
                 tag: itemTag,
@@ -237,7 +236,8 @@ const VirtualList = Vue.component('virtual-list', {
                 source: dataSource,
                 extraProps: extraProps,
                 component: dataComponent
-              }
+              },
+              class: `${itemClass} ${this.itemClassAdd ? this.itemClassAdd(index) : ''}`
             }))
           } else {
             console.warn(`Cannot get the data-key '${dataKey}' from data-sources.`)

src/props.js

@@ -70,6 +70,9 @@ export const VirtualProps = {
     type: String,
     default: ''
   },
+  itemClassAdd: {
+    type: Function
+  },
 
   headerTag: {
     type: String,