Commit c755733a9ca3bbcf4514e948bbbb5e0accd13e6e

Authored by 梁灏
1 parent 1843ff3b

support Grid

support Grid
README.md
... ... @@ -16,7 +16,7 @@
16 16 ### English (Coming soon)
17 17  
18 18 ## Programming
19   -- [ ] Grid
  19 +- [x] Grid
20 20 - [ ] Layout
21 21 - [ ] Button
22 22 - [ ] Icon
... ...
src/components/layout/col.vue renamed to src/components/grid/col.vue
src/components/layout/index.js renamed to src/components/grid/index.js
src/components/layout/row.vue renamed to src/components/grid/row.vue
... ... @@ -69,7 +69,7 @@
69 69 this.updateGutter(val);
70 70 }
71 71 },
72   - ready () {
  72 + mounted () {
73 73 this.updateGutter(this.gutter);
74 74 }
75 75 };
... ...
src/index.js
... ... @@ -42,7 +42,7 @@ import Affix from './components/affix';
42 42 // import Transfer from './components/transfer';
43 43 // import Tree from './components/tree';
44 44 // import Upload from './components/upload';
45   -// import { Row, Col } from './components/layout';
  45 +import { Row, Col } from './components/grid';
46 46 // import { Select, Option, OptionGroup } from './components/select';
47 47 import locale from './locale';
48 48  
... ... @@ -68,7 +68,7 @@ const iview = {
68 68 // DropdownMenu: Dropdown.Menu,
69 69 // iForm: Form,
70 70 // FormItem: Form.Item,
71   - // iCol: Col,
  71 + iCol: Col,
72 72 // Collapse,
73 73 // Icon,
74 74 // iInput: Input,
... ... @@ -90,7 +90,7 @@ const iview = {
90 90 // Radio,
91 91 // RadioGroup: Radio.Group,
92 92 // Rate,
93   - // Row,
  93 + Row,
94 94 // iSelect: Select,
95 95 // Slider,
96 96 // Spin,
... ...
test/app.vue
... ... @@ -24,34 +24,8 @@ li + li {
24 24 <div>
25 25 <nav>
26 26 <ul>
27   - <li><a v-link="'/button'">Button</a></li>
28   - <li><a v-link="'/card'">Card</a></li>
29   - <li><a v-link="'/message'">Message</a></li>
30   - <li><a v-link="'/more'">More</a></li>
31   - <li><a v-link="'/page'">Page</a></li>
32   - <li><a v-link="'/poptip'">Poptip</a></li>
33   - <li><a v-link="'/tooltip'">Tooltip</a></li>
34   - <li><a v-link="'/radio'">Radio</a></li>
35   - <li><a v-link="'/select'">Select</a></li>
36   - <li><a v-link="'/slider'">Slider</a></li>
37   - <li><a v-link="'/step'">Step</a></li>
38   - <li><a v-link="'/switch'">Switch</a></li>
39   - <li><a v-link="'/alert'">Alert</a></li>
40   - <li><a v-link="'/tag'">Tag</a></li>
41   - <li><a v-link="'/input'">Input</a></li>
42   - <li><a v-link="'/cascader'">Cascader</a></li>
43   - <li><a v-link="'/transfer'">Transfer</a></li>
44   - <li><a v-link="'/table'">Table</a></li>
45   - <li><a v-link="'/dropdown'">Dropdown</a></li>
46   - <li><a v-link="'/tabs'">Tabs</a></li>
47   - <li><a v-link="'/menu'">Menu</a></li>
48   - <li><a v-link="'/date'">Date</a></li>
49   - <li><a v-link="'/form'">Form</a></li>
50   - <li><a v-link="'/carousel'">Carousel</a></li>
51   - <li><a v-link="'/rate'">Rate</a></li>
52   - <li><a v-link="'/upload'">Upload</a></li>
53   - <li><a v-link="'/tree'">Tree</a></li>
54   - <li><a v-link="'/notice'">Notice</a></li>
  27 + <li><router-link to="/affix">Affix</router-link></li>
  28 + <li><router-link to="/grid">Grid</router-link></li>
55 29 </ul>
56 30 </nav>
57 31 <router-view></router-view>
... ... @@ -64,7 +38,7 @@ li + li {
64 38  
65 39 }
66 40 },
67   - ready: function() {
  41 + mounted: function() {
68 42  
69 43 },
70 44 beforeDestroy: function() {
... ...
test/main.js
... ... @@ -20,6 +20,10 @@ const router = new VueRouter({
20 20 {
21 21 path: '/affix',
22 22 component: require('./routers/affix.vue')
  23 + },
  24 + {
  25 + path: '/grid',
  26 + component: require('./routers/grid.vue')
23 27 }
24 28 ]
25 29 });
... ...
test/routers/affix.vue
  1 +<style>
  2 + body{
  3 + /*height: 2000px;*/
  4 + }
  5 + .demo-affix{
  6 + width: 100px;
  7 + height: 30px;
  8 + background: #f60;
  9 + color: #fff
  10 + }
  11 +</style>
1 12 <template>
2 13 <Affix>
3 14 <span class="demo-affix">固定在最顶部</span>
... ...
test/routers/grid.vue 0 → 100644
  1 +<template>
  2 + <div>
  3 + <Row>
  4 + <i-col span="12">col-12</i-col>
  5 + <i-col span="12">col-12</i-col>
  6 + </Row>
  7 + <br>
  8 + <Row>
  9 + <i-col span="8">col-8</i-col>
  10 + <i-col span="8">col-8</i-col>
  11 + <i-col span="8">col-8</i-col>
  12 + </Row>
  13 + <br>
  14 + <Row>
  15 + <i-col span="6">col-6</i-col>
  16 + <i-col span="6">col-6</i-col>
  17 + <i-col span="6">col-6</i-col>
  18 + <i-col span="6">col-6</i-col>
  19 + </Row>
  20 + </div>
  21 +</template>
  22 +<script>
  23 + export default {
  24 +
  25 + }
  26 +</script>
... ...