Commit c2db4f928c0ce3141f132163ad631379e866554e
1 parent
e5337c81
fixed #540
Showing
3 changed files
with
31 additions
and
20 deletions
Show diff stats
examples/routers/grid.vue
| 1 | +<style> | ||
| 2 | + .demo-col div{ | ||
| 3 | + background: #f50; | ||
| 4 | + } | ||
| 5 | +</style> | ||
| 1 | <template> | 6 | <template> |
| 2 | <div> | 7 | <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> | 8 | + <Row :gutter="16"> |
| 9 | + <i-col class-name="demo-col" span="4" v-for="i in n" key="i"> | ||
| 10 | + <div>col-8</div> | ||
| 11 | + </i-col> | ||
| 19 | </Row> | 12 | </Row> |
| 13 | + <Button @click="add">add</Button> | ||
| 20 | </div> | 14 | </div> |
| 21 | </template> | 15 | </template> |
| 22 | <script> | 16 | <script> |
| 23 | export default { | 17 | export default { |
| 24 | - | 18 | + data () { |
| 19 | + return { | ||
| 20 | + n: 2 | ||
| 21 | + } | ||
| 22 | + }, | ||
| 23 | + methods: { | ||
| 24 | + add () { | ||
| 25 | + this.n++; | ||
| 26 | + } | ||
| 27 | + } | ||
| 25 | } | 28 | } |
| 26 | </script> | 29 | </script> |
src/components/grid/col.vue
| @@ -67,6 +67,17 @@ | @@ -67,6 +67,17 @@ | ||
| 67 | 67 | ||
| 68 | return style; | 68 | return style; |
| 69 | } | 69 | } |
| 70 | + }, | ||
| 71 | + methods: { | ||
| 72 | + updateGutter () { | ||
| 73 | + this.$parent.updateGutter(this.$parent.gutter); | ||
| 74 | + } | ||
| 75 | + }, | ||
| 76 | + mounted () { | ||
| 77 | + this.updateGutter(); | ||
| 78 | + }, | ||
| 79 | + beforeDestroy () { | ||
| 80 | + this.updateGutter(); | ||
| 70 | } | 81 | } |
| 71 | }; | 82 | }; |
| 72 | </script> | 83 | </script> |
src/components/grid/row.vue