drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Row component forces the use of flex layout, and add prop wrap. Col add flex prop

Browse source
This commit is contained in:
梁灏 2021-01-15 17:59:30 +08:00
parent 27adf364c0
commit 8d9ba2b089
5 changed files with 274 additions and 219 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/grid/col.vue
View file

@ -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;
}
},

16
src/components/grid/row.vue
View file

@ -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
}
];
},