From 8d9ba2b089befb7d62bbbeb4379cc6dbcbd853aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= Date: Fri, 15 Jan 2021 17:59:30 +0800 Subject: [PATCH] Row component forces the use of flex layout, and add prop wrap. Col add flex prop --- examples/routers/grid.vue | 329 +++++++++++++++++++--------------- src/components/grid/col.vue | 24 ++- src/components/grid/row.vue | 16 +- src/styles/common/layout.less | 88 ++++----- src/styles/mixins/layout.less | 36 +--- 5 files changed, 274 insertions(+), 219 deletions(-) diff --git a/examples/routers/grid.vue b/examples/routers/grid.vue index 580fa264..f141629b 100644 --- a/examples/routers/grid.vue +++ b/examples/routers/grid.vue @@ -1,152 +1,191 @@ diff --git a/src/components/grid/col.vue b/src/components/grid/col.vue index 4695c42d..67c21782 100644 --- a/src/components/grid/col.vue +++ b/src/components/grid/col.vue @@ -7,6 +7,18 @@ import { findComponentUpward } from '../../utils/assist'; const prefixCls = 'ivu-col'; + function parseFlex(flex) { + if (typeof flex === 'number') { + return `${flex} ${flex} auto`; + } + + if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) { + return `0 0 ${flex}`; + } + + return flex; + } + export default { name: 'iCol', props: { @@ -21,7 +33,12 @@ md: [Number, Object], lg: [Number, Object], xl: [Number, Object], - xxl: [Number, Object] + xxl: [Number, Object], + // 4.5.0 + flex: { + type: [Number, String], + default: '' + } }, data () { return { @@ -68,6 +85,11 @@ }; } + // 4.5.0 + if (this.flex) { + style.flex = parseFlex(this.flex); + } + return style; } }, diff --git a/src/components/grid/row.vue b/src/components/grid/row.vue index 8aa55edc..8ca9cac3 100644 --- a/src/components/grid/row.vue +++ b/src/components/grid/row.vue @@ -11,6 +11,7 @@ export default { name: 'Row', props: { + // todo 4.5.0 已无效，强制 flex type: { validator (value) { return oneOf(value, ['flex']); @@ -30,17 +31,26 @@ type: Number, default: 0 }, - className: String + className: String, + // 4.5.0 + wrap: { + type: Boolean, + default: true + } }, computed: { classes () { return [ + // todo 4.5.0 已无效，强制 flex + `${prefixCls}`, { - [`${prefixCls}`]: !this.type, [`${prefixCls}-${this.type}`]: !!this.type, [`${prefixCls}-${this.type}-${this.align}`]: !!this.align, [`${prefixCls}-${this.type}-${this.justify}`]: !!this.justify, - [`${this.className}`]: !!this.className + [`${prefixCls}-${this.align}`]: !!this.align, + [`${prefixCls}-${this.justify}`]: !!this.justify, + [`${this.className}`]: !!this.className, + [`${prefixCls}-no-wrap`]: !this.wrap } ]; }, diff --git a/src/styles/common/layout.less b/src/styles/common/layout.less index db19735f..56e246c3 100644 --- a/src/styles/common/layout.less +++ b/src/styles/common/layout.less @@ -1,54 +1,56 @@ .@{row-prefix-cls} { - .make-row(); - display: block; + display: flex; + flex-flow: row wrap; - &-flex { + &::before, + &::after { display: flex; - flex-direction: row; - flex-wrap: wrap; + } - &:before, - &:after { - display: flex; - } - // x轴原点 - &-start { - justify-content: flex-start; - } - // x轴居中 - &-center { - justify-content: center; - } - // x轴反方向 - &-end { - justify-content: flex-end; - } - // x轴平分 - &-space-between { - justify-content: space-between; - } - // x轴有间隔地平分 - &-space-around { - justify-content: space-around; - } - // 顶部对齐 - &-top { - align-items: flex-start; - } - // 居中对齐 - &-middle { - align-items: center; - } - // 底部对齐 - &-bottom { - align-items: flex-end; - } - }; + // No wrap of flex + &-no-wrap { + flex-wrap: nowrap; + } + + // x轴原点 + &-start{ + justify-content: flex-start; + } + // x轴居中 + &-center{ + justify-content: center; + } + //x轴反方向 + &-end { + justify-content: flex-end; + } + // x轴平分 + &-space-between { + justify-content: space-between; + } + // x轴有间隔地平分 + &-space-around { + justify-content: space-around; + } + // 顶部对齐 + &-top { + align-items: flex-start; + } + // 居中对齐 + &-middle { + align-items: center; + } + // 底部对齐 + &-bottom { + align-items: flex-end; + } } .@{col-prefix-cls} { position: relative; - display: block; + max-width: 100%; + // Prevent columns from collapsing when empty + min-height: 1px; } .make-grid(); diff --git a/src/styles/mixins/layout.less b/src/styles/mixins/layout.less index a5768a60..70466537 100644 --- a/src/styles/mixins/layout.less +++ b/src/styles/mixins/layout.less @@ -1,36 +1,13 @@ @row-prefix-cls: ~"@{css-prefix}row"; @col-prefix-cls: ~"@{css-prefix}col"; -.make-row(@gutter: @grid-gutter-width) { - position: relative; - margin-left: (@gutter / -2); - margin-right: (@gutter / -2); - height: auto; - .clearfix; -} - -.float-grid-columns(@class) { - .col(@index) { // initial - @item: ~".@{col-prefix-cls}-span@{class}-@{index}"; - .col((@index + 1), @item); - } - .col(@index, @list) when (@index =< @grid-columns) { // general - @item: ~".@{col-prefix-cls}-span@{class}-@{index}"; - .col((@index + 1), ~"@{list}, @{item}"); - } - .col(@index, @list) when (@index > @grid-columns) { // terminal - @{list} { - float: left; - flex: 0 0 auto; - } - } - .col(1); // kickstart it -} +// mixins for grid system .loop-grid-columns(@index, @class) when (@index > 0) { .@{col-prefix-cls}-span@{class}-@{index} { display: block; - width: percentage((@index / @grid-columns)); + flex: 0 0 percentage((@index / @grid-columns)); + max-width: percentage((@index / @grid-columns)); } .@{col-prefix-cls}@{class}-push-@{index} { left: percentage((@index / @grid-columns)); @@ -51,6 +28,12 @@ .@{col-prefix-cls}-span@{class}-@{index} { display: none; } + .@{col-prefix-cls}-push-@{index} { + left: auto; + } + .@{col-prefix-cls}-pull-@{index} { + right: auto; + } .@{col-prefix-cls}@{class}-push-@{index} { left: auto; } @@ -66,6 +49,5 @@ } .make-grid(@class: ~'') { - .float-grid-columns(@class); .loop-grid-columns(@grid-columns, @class); }