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 | 6 | <template> |
| 2 | 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 | 12 | </Row> |
| 13 | + <Button @click="add">add</Button> | |
| 20 | 14 | </div> |
| 21 | 15 | </template> |
| 22 | 16 | <script> |
| 23 | 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 | 29 | </script> | ... | ... |
src/components/grid/col.vue
| ... | ... | @@ -67,6 +67,17 @@ |
| 67 | 67 | |
| 68 | 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 | 83 | </script> | ... | ... |