Add custom root and wrap element tag support.

README.md

@@ -64,7 +64,7 @@ The `<Item>` component is included inside but defined outside the `<virtualList>
 
 ```html
 <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
-<script src="https://tangbc.github.io/vue-virtual-scroll-list/dist/vue-virtual-scroll-list.js"></script>
+<script src="https://tangbc.github.io/vue-virtual-scroll-list/index.js"></script>
 
 <div id="app">
     <virtual-list :size="40" :remain="8">
@@ -80,7 +80,7 @@ new Vue({
         items: new Array(100000)
     },
     components: {
-        'virtual-list': VirutalList
+        'virtual-list': VirutalScrollList // Global name as `VirutalScrollList`
     }
 });
 ```
@@ -94,6 +94,8 @@ new Vue({
 :--- | :--- | :--- | :--- |
 | size | Number | ✓ | Each list item height, currently only supports fixed height. |
 | remain | Number | ✓ | How many items except show in virtual-list viewport, so `size` and `remian` will determine the virtual-list outside container height (size × remian). |
+| rtag | String | * | Default value is `div`, the virtual-list's root HTMLElement tag name, in all case it's style is set to `display: block;` |
+| wtag | String | * | Default value is `div`, the virtual-list's item wrapper HTMLElement tag name, in all case it's style is set to `display: block;` |
 | onScroll | Function | * | Call on virtual-list scroll event hanlding, param: `(e, scrollTop)`  |
 | toTop | Event | * | An event emit by virtual-list component when the list is scrolled on top. |
 | toBottom | Event | * | An event emit by virtual-list component when the list is scrolled on bottom. |

index.js

@@ -8,7 +8,7 @@
     } else {
         root[moduleName] = factory(root['Vue'])
     }
-})(this, 'VirutalList', function (Vue2) {
+})(this, 'VirutalScrollList', function (Vue2) {
     'use strict'
 
     return Vue2.component('vue-virtual-scroll-list', {
@@ -21,6 +21,14 @@
                 type: Number,
                 required: true
             },
+            rtag: {
+                type: String,
+                default: 'div'
+            },
+            wtag: {
+                type: String,
+                default: 'div'
+            },
             onScroll: Function
         },
 
@@ -100,18 +108,20 @@
             var showList = this.filter(this.$slots.default)
             var delta = this.$options.delta
 
-            return createElement('div', {
+            return createElement(this.rtag, {
                 'ref': 'container',
                 'style': {
+                    'display': 'block',
                     'overflow-y': 'auto',
                     'height': delta.viewHeight + 'px'
                 },
                 'on': {
                     'scroll': this.handleScroll
                 }
             }, [
-                createElement('div', {
+                createElement(this.wtag, {
                     'style': {
+                        'display': 'block',
                         'padding-top': delta.paddingTop + 'px',
                         'padding-bottom': delta.allPadding - delta.paddingTop + 'px'
                     }

package.json

@@ -1,12 +1,13 @@
 {
   "name": "vue-virtual-scroll-list",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A vue (2.x) component support big data and infinite loading by using virtual scroll list.",
   "main": "index.js",
   "files": [
     "index.js"
   ],
   "scripts": {
+    "dev": "webpack --watch --config ./dev/webpack.conf.js",
     "examples": "webpack --watch --config ./examples/webpack.conf.js"
   },
   "keywords": [