support Grid

support Grid

README.md

@@ -16,7 +16,7 @@
 ### English (Coming soon)
 
 ## Programming
-- [ ] Grid
+- [x] Grid
 - [ ] Layout
 - [ ] Button
 - [ ] Icon

src/components/grid/row.vue

@@ -69,7 +69,7 @@
                 this.updateGutter(val);
             }
         },
-        ready () {
+        mounted () {
             this.updateGutter(this.gutter);
         }
     };

src/index.js

@@ -42,7 +42,7 @@ import Affix from './components/affix';
 // import Transfer from './components/transfer';
 // import Tree from './components/tree';
 // import Upload from './components/upload';
-// import { Row, Col } from './components/layout';
+import { Row, Col } from './components/grid';
 // import { Select, Option, OptionGroup } from './components/select';
 import locale from './locale';
 
@@ -68,7 +68,7 @@ const iview = {
     // DropdownMenu: Dropdown.Menu,
     // iForm: Form,
     // FormItem: Form.Item,
-    // iCol: Col,
+    iCol: Col,
     // Collapse,
     // Icon,
     // iInput: Input,
@@ -90,7 +90,7 @@ const iview = {
     // Radio,
     // RadioGroup: Radio.Group,
     // Rate,
-    // Row,
+    Row,
     // iSelect: Select,
     // Slider,
     // Spin,

test/app.vue

@@ -24,34 +24,8 @@ li + li {
     <div>
         <nav>
             <ul>
-                <li><a v-link="'/button'">Button</a></li>
-                <li><a v-link="'/card'">Card</a></li>
-                <li><a v-link="'/message'">Message</a></li>
-                <li><a v-link="'/more'">More</a></li>
-                <li><a v-link="'/page'">Page</a></li>
-                <li><a v-link="'/poptip'">Poptip</a></li>
-                <li><a v-link="'/tooltip'">Tooltip</a></li>
-                <li><a v-link="'/radio'">Radio</a></li>
-                <li><a v-link="'/select'">Select</a></li>
-                <li><a v-link="'/slider'">Slider</a></li>
-                <li><a v-link="'/step'">Step</a></li>
-                <li><a v-link="'/switch'">Switch</a></li>
-                <li><a v-link="'/alert'">Alert</a></li>
-                <li><a v-link="'/tag'">Tag</a></li>
-                <li><a v-link="'/input'">Input</a></li>
-                <li><a v-link="'/cascader'">Cascader</a></li>
-                <li><a v-link="'/transfer'">Transfer</a></li>
-                <li><a v-link="'/table'">Table</a></li>
-                <li><a v-link="'/dropdown'">Dropdown</a></li>
-                <li><a v-link="'/tabs'">Tabs</a></li>
-                <li><a v-link="'/menu'">Menu</a></li>
-                <li><a v-link="'/date'">Date</a></li>
-                <li><a v-link="'/form'">Form</a></li>
-                <li><a v-link="'/carousel'">Carousel</a></li>
-                <li><a v-link="'/rate'">Rate</a></li>
-                <li><a v-link="'/upload'">Upload</a></li>
-                <li><a v-link="'/tree'">Tree</a></li>
-                <li><a v-link="'/notice'">Notice</a></li>
+                <li><router-link to="/affix">Affix</router-link></li>
+                <li><router-link to="/grid">Grid</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
@@ -64,7 +38,7 @@ li + li {
 
             }
         },
-        ready: function() {
+        mounted: function() {
 
         },
         beforeDestroy: function() {

test/main.js

@@ -20,6 +20,10 @@ const router = new VueRouter({
         {
             path: '/affix',
             component: require('./routers/affix.vue')
+        },
+        {
+            path: '/grid',
+            component: require('./routers/grid.vue')
         }
     ]
 });

test/routers/affix.vue

@@ -1,3 +1,14 @@
+<style>
+    body{
+        /*height: 2000px;*/
+    }
+    .demo-affix{
+        width: 100px;
+        height: 30px;
+        background: #f60;
+        color: #fff
+    }
+</style>
 <template>
     <Affix>
         <span class="demo-affix">固定在最顶部</span>

test/routers/grid.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <Row>
+            <i-col span="12">col-12</i-col>
+            <i-col span="12">col-12</i-col>
+        </Row>
+        <br>
+        <Row>
+            <i-col span="8">col-8</i-col>
+            <i-col span="8">col-8</i-col>
+            <i-col span="8">col-8</i-col>
+        </Row>
+        <br>
+        <Row>
+            <i-col span="6">col-6</i-col>
+            <i-col span="6">col-6</i-col>
+            <i-col span="6">col-6</i-col>
+            <i-col span="6">col-6</i-col>
+        </Row>
+    </div>
+</template>
+<script>
+    export default {
+
+    }
+</script>