Skip to content

Fakin's Blog

  • 首页
  • 前端
    • Vue
    • React
    • JavaScript
    • CSS
  • 技术
    • 织梦教程
  • 模板
    • 织梦模板
    • wordpress主题
  • 资源
  • 日记
  • 友链

仿element-ui中Layout 布局-xcLayout

四月 14, 2020 by Fakin

本源码为自己练习作品,仿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>

Post navigation

上一篇:

node-sass-error 解决方法

最近文章

  • 仿element-ui中Layout 布局-xcLayout
  • node-sass-error 解决方法
  • 自我ESLint配置【仅供参考】
  • JavaScript实用工具库【持续更新】
  • vue技巧【持续更新】
  • uni-app中picker组件“确定”和“取消”文字的修改
  • uni-app国际化
  • vue-cli3.0配置scss全局变量

最近评论

  • 心灵博客发表在《JavaScript实用工具库【持续更新】》
  • Teacher Du发表在《友情链接》
  • 火辣辣发表在《友情链接》
  • 心灵博客发表在《uni-app跨域设置》
  • 腾讯云代金券发表在《element ui+七牛云上传》

更新日历

2021年一月
一 二 三 四 五 六 日
« 4月    
 123
45678910
11121314151617
18192021222324
25262728293031
© 2021 Fakin's Blog         | WordPress Theme by SuperbThemes | 蜀ICP备16017838号-2