Layout
涉及到的组件
row
col
源码内容
省略
gutter
gutter
的作用是让row里面的col产生出间隔来,但是注意容器的最左和最右侧是没有间隔的
上图就是最终示意图,黑框就是<el-row>
的宽度范围,里面是<el-col>
组件,
这个组件的宽度其实按<el-row>
百分比来计算,而且box-sizing
是border-box
,
注意gutter
属性是定义在父级的<el-row>
上,子级的col通过 inject
可以拿到该属性,
//row.ts
const gutter = computed(() => props.gutter)
provide('ElRow', {
gutter,
})
然后给<el-col>
分配padding-left
和padding-right
,因此每个col都有左右padding,
//col.ts
const { gutter } = inject('ElRow', { gutter: { value: 0 } })
const style = computed(() => {
if (gutter.value) {
return {
paddingLeft: gutter.value / 2 + 'px',
paddingRight: gutter.value / 2 + 'px',
}
}
return {}
})
上图中每个col占宽25%,gutter的宽度就是col的padding的2倍,但是注意最左侧和最右侧是没有padding的,那么问题来了,怎么消去最左和最右的padding? 这里就是<el-row>
负的margin起的作用,如果不设置上面的计算属性的style,那么左右2侧就会有col的padding,因此这里负的margin抵消了col的padding,且该值为 -gutter/2+'px'
//row.ts
//row的左右margin,用于抵消col的padding,这里通过gutter计算出实际margin
const style = computed(() => {
const ret = {
marginLeft: '',
marginRight: '',
}
if (props.gutter) {
ret.marginLeft = `-${props.gutter / 2}px`
ret.marginRight = ret.marginLeft
}
return ret
})
注意如果初看上面的图,一般的想法是col之间用margin来间隔,其实是不行的,而用padding来间隔就很简单,width按百分比来分配就行(box-sizing要设置为border-box
)
Provide/inject
//row.ts
const gutter = computed(() => props.gutter)
provide('ElRow', {
gutter,
})
//col.ts
const { gutter } = inject('ElRow', { gutter: { value: 0 } })
why
这里
provide
的gutter
是computed
,为什么不直接用props.gutter
?//row.ts provide('ElRow',props.gutter) //col.ts const gutter = inject('ElRow')
provide/inject
绑定并不是响应式的。我们可以通过传递一个ref
property 或reactive
对象给provide
来改变这种行为。
h函数
这里使用h函数
是因为tag
不确定
fix gutter bug
if (gutter.value) {
ret.push('is-guttered')
}
❓此代码感觉没啥用。。。