仿element-ui中Layout 布局-xcLayout
本源码为自己练习作品,仿element-ui中Layout 布局,传参没有element那么多
前言
element中的[2]
xcLayout
xc-col.js
export default {
name: 'XcCol',
props: {
column: {
type: Number,
default: 24
},
left: Number,
right: Number
},
computed: {
gutter() {
let parent = this.$parent
while (parent && parent.$options.componentName !== 'xc-row') {
parent = parent.$parent
}
return parent ? parent.gutter : 0
}
},
render(h) {
let classList = []
let style = {}
if (this.gutter) {
style.paddingLeft = this.gutter / 2 + 'px'
style.paddingRight = style.paddingLeft
}
['column', 'left', 'right'].forEach(v => {
let item = this[v]
if (item || item === 0) {
classList.push(v !== 'column' ? `xc-col-${v}-${item}` : `xc-col-${item}`)
}
})
return h('div', {
class: ['xc-col', classList],
style
}, this.$slots.default)
}
}
xc-row.js
export default {
name: 'XcRow',
componentName: 'xc-row',
props: {
space: Number
},
render(h) {
let style = {}
if (this.space) {
style.marginLeft = `-${this.space/2}px`
style.marginRight = style.marginLeft
}
return h('div', {
class: 'xc-row',
style
}, this.$slots.default)
}
}
xc-grid.scss
.xc-row {
position: relative;
box-sizing: border-box;
}
.xc-row:after,
.xc-row:before {
display: table;
content: '';
}
.xc-row:after {
clear: both;
}
[class*='xc-col-'] {
float: left;
box-sizing: border-box;
}
@for $i from 0 through 24 {
.xc-col-#{$i} {
width: (1 / 24 * $i * 100) * 1%;
}
.xc-col-left-#{$i} {
position: relative;
right: (1 / 24 * $i * 100) * 1%;
}
.xc-col-right-#{$i} {
position: relative;
left: (1 / 24 * $i * 100) * 1%;
}
}
Readme
使用方法
main.js
import Row from './components/grid/xc-row'
import Col from './components/grid/xc-col'
import './components/grid/xc-grid.scss'
xc-row
space 栅格间隔 类型 number 默认值 0 推荐 20 30
xc-col
column 栅格占据的列数 类型 number 默认值 24 1-24
left 栅格向左移动格数 类型 number 默认值 0 0-24
right 栅格向右移动格数 类型 number 默认值 0 0-24
所有的单行column值总和不得超过24否则会进行换行
Demo
<xc-row :space="30">
<!-- xc-row父组件只能传递 space 代表每个栅格之间的距离-->
<xc-col :column="4">
<!--xc-col 子组件 传递的参数有 column->栅格大小 只支持1 - 24 right 栅格向右移动格数 left 栅格向左移动格数-->
<div style="width:100%;height:20px;background:#000"></div>
</xc-col>
<xc-col :column="16">
<div style="width:100%;height:20px;background:#000"></div>
</xc-col>
<xc-col :column="4">
<div style="width:100%;height:20px;background:#000"></div>
</xc-col>
</xc-row>