drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add gutter to Row and Col

Browse source 
add gutter to Row and Col
This commit is contained in:
梁灏 2016-10-31 22:28:13 +08:00
parent e3a12bd330
commit d2203972af
7 changed files with 105 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/layout/col.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="classes">
<div :class="classes" :style="styles">
<slot></slot>
</div>
</template>
@ -17,6 +17,11 @@
pull: [Number, String],
className: String
},
data () {
return {
gutter: 0
}
},
computed: {
classes () {
return [
@ -30,6 +35,17 @@
[`${this.className}`]: !!this.className
}
]
},
styles () {
let style = {};
if (this.gutter !== 0) {
style = {
paddingLeft: this.gutter / 2 + 'px',
paddingRight: this.gutter / 2 + 'px'
}
}
return style;
}
}
}

34
src/components/layout/row.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="classes">
<div :class="classes" :style="styles">
<slot></slot>
</div>
</template>
@ -25,6 +25,10 @@
return oneOf(value, ['start', 'end', 'center', 'space-around', 'space-between']);
}
},
gutter: {
type: Number,
default: 0
},
className: String
},
computed: {
@ -38,7 +42,35 @@
[`${this.className}`]: !!this.className
}
]
},
styles () {
let style = {};
if (this.gutter !== 0) {
style = {
marginLeft: this.gutter / -2 + 'px',
marginRight: this.gutter / -2 + 'px'
}
}
return style;
}
},
methods: {
updateGutter (val) {
this.$children.forEach((child) => {
if (val !== 0) {
child.gutter = val;
}
});
}
},
watch: {
gutter (val) {
this.updateGutter(val);
}
},
ready () {
this.updateGutter(this.gutter);
}
}
</script>