仿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>