Commit 9eec7f16603c2a20c1fd89659a8e84533c209d3f
1 parent
b9541c05
fixed #1661
Showing
3 changed files
with
31 additions
and
14 deletions
Show diff stats
examples/routers/grid.vue
| 1 | <style> | 1 | <style> |
| 2 | - .demo-col div{ | ||
| 3 | - background: #f50; | 2 | + .ivu-col div{ |
| 3 | + background: rgba(0,153,229,.7); | ||
| 4 | } | 4 | } |
| 5 | </style> | 5 | </style> |
| 6 | <template> | 6 | <template> |
| 7 | <div> | 7 | <div> |
| 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> | 8 | + <Row :gutter="64"> |
| 9 | + <Card> | ||
| 10 | + <i-col span="6"> | ||
| 11 | + <div>col-6</div> | ||
| 12 | + </i-col> | ||
| 13 | + <i-col span="6"> | ||
| 14 | + <div>col-6</div> | ||
| 15 | + </i-col> | ||
| 16 | + <i-col span="6"> | ||
| 17 | + <div>col-6</div> | ||
| 18 | + </i-col> | ||
| 19 | + <i-col span="6"> | ||
| 20 | + <div>col-6</div> | ||
| 21 | + </i-col> | ||
| 22 | + </Card> | ||
| 12 | </Row> | 23 | </Row> |
| 13 | - <Button @click="add">add</Button> | ||
| 14 | </div> | 24 | </div> |
| 15 | </template> | 25 | </template> |
| 16 | <script> | 26 | <script> |
src/components/grid/col.vue
| @@ -4,6 +4,7 @@ | @@ -4,6 +4,7 @@ | ||
| 4 | </div> | 4 | </div> |
| 5 | </template> | 5 | </template> |
| 6 | <script> | 6 | <script> |
| 7 | + import { findComponentUpward } from '../../utils/assist'; | ||
| 7 | const prefixCls = 'ivu-col'; | 8 | const prefixCls = 'ivu-col'; |
| 8 | 9 | ||
| 9 | export default { | 10 | export default { |
| @@ -70,7 +71,10 @@ | @@ -70,7 +71,10 @@ | ||
| 70 | }, | 71 | }, |
| 71 | methods: { | 72 | methods: { |
| 72 | updateGutter () { | 73 | updateGutter () { |
| 73 | - this.$parent.updateGutter(this.$parent.gutter); | 74 | + const Row = findComponentUpward(this, 'Row'); |
| 75 | + if (Row) { | ||
| 76 | + Row.updateGutter(Row.gutter); | ||
| 77 | + } | ||
| 74 | } | 78 | } |
| 75 | }, | 79 | }, |
| 76 | mounted () { | 80 | mounted () { |
src/components/grid/row.vue
| @@ -4,7 +4,7 @@ | @@ -4,7 +4,7 @@ | ||
| 4 | </div> | 4 | </div> |
| 5 | </template> | 5 | </template> |
| 6 | <script> | 6 | <script> |
| 7 | - import { oneOf } from '../../utils/assist'; | 7 | + import { oneOf, findComponentsDownward } from '../../utils/assist'; |
| 8 | 8 | ||
| 9 | const prefixCls = 'ivu-row'; | 9 | const prefixCls = 'ivu-row'; |
| 10 | 10 | ||
| @@ -58,11 +58,14 @@ | @@ -58,11 +58,14 @@ | ||
| 58 | }, | 58 | }, |
| 59 | methods: { | 59 | methods: { |
| 60 | updateGutter (val) { | 60 | updateGutter (val) { |
| 61 | - this.$children.forEach((child) => { | ||
| 62 | - if (val !== 0) { | ||
| 63 | - child.gutter = val; | ||
| 64 | - } | ||
| 65 | - }); | 61 | + const Cols = findComponentsDownward(this, 'iCol'); |
| 62 | + if (Cols.length) { | ||
| 63 | + Cols.forEach((child) => { | ||
| 64 | + if (val !== 0) { | ||
| 65 | + child.gutter = val; | ||
| 66 | + } | ||
| 67 | + }); | ||
| 68 | + } | ||
| 66 | } | 69 | } |
| 67 | }, | 70 | }, |
| 68 | watch: { | 71 | watch: { |