element-plus源码学习——layout
⽂章⽬录
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，
margin属性值可以为百分比//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')
}
此代码感觉没啥⽤。。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。