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 | 1 | <style> |
2 | - .demo-col div{ | |
3 | - background: #f50; | |
2 | + .ivu-col div{ | |
3 | + background: rgba(0,153,229,.7); | |
4 | 4 | } |
5 | 5 | </style> |
6 | 6 | <template> |
7 | 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 | 23 | </Row> |
13 | - <Button @click="add">add</Button> | |
14 | 24 | </div> |
15 | 25 | </template> |
16 | 26 | <script> | ... | ... |
src/components/grid/col.vue
... | ... | @@ -4,6 +4,7 @@ |
4 | 4 | </div> |
5 | 5 | </template> |
6 | 6 | <script> |
7 | + import { findComponentUpward } from '../../utils/assist'; | |
7 | 8 | const prefixCls = 'ivu-col'; |
8 | 9 | |
9 | 10 | export default { |
... | ... | @@ -70,7 +71,10 @@ |
70 | 71 | }, |
71 | 72 | methods: { |
72 | 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 | 80 | mounted () { | ... | ... |
src/components/grid/row.vue
... | ... | @@ -4,7 +4,7 @@ |
4 | 4 | </div> |
5 | 5 | </template> |
6 | 6 | <script> |
7 | - import { oneOf } from '../../utils/assist'; | |
7 | + import { oneOf, findComponentsDownward } from '../../utils/assist'; | |
8 | 8 | |
9 | 9 | const prefixCls = 'ivu-row'; |
10 | 10 | |
... | ... | @@ -58,11 +58,14 @@ |
58 | 58 | }, |
59 | 59 | methods: { |
60 | 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 | 71 | watch: { | ... | ... |