修复Grid栅格组件Col属性xl和xxl无效的问题

This commit is contained in:
Eric Tian 2019-03-08 11:04:06 +08:00
parent 72653cc906
commit f5656d0b7a
3 changed files with 36 additions and 8 deletions

View file

@ -19,7 +19,9 @@
xs: [Number, Object],
sm: [Number, Object],
md: [Number, Object],
lg: [Number, Object]
lg: [Number, Object],
xl: [Number, Object],
xxl: [Number, Object]
},
data () {
return {
@ -40,7 +42,7 @@
}
];
['xs', 'sm', 'md', 'lg'].forEach(size => {
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
if (typeof this[size] === 'number') {
classList.push(`${prefixCls}-span-${size}-${this[size]}`);
} else if (typeof this[size] === 'object') {

View file

@ -81,8 +81,26 @@
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
// Columns, offsets, pushes, and pulls for the wide desktop device range.
@media (min-width: @screen-lg-min) {
.make-grid(-lg);
}
// Extra large grid
//
// Columns, offsets, pushes, and pulls for the full hd desktop device range.
@media (min-width: @screen-xl-min) {
.make-grid(-xl);
}
// Extra extra large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-xxl-min) {
.make-grid(-xxl);
}

18
types/grid.d.ts vendored
View file

@ -54,19 +54,27 @@ export declare interface Col extends Vue {
*/
'class-name'?: string;
/**
* <768px 响应式栅格可为栅格数或一个包含其他属性的对象
* <576px 响应式栅格可为栅格数或一个包含其他属性的对象
*/
xs?: number | object;
/**
* 768px
* 576px
*/
sm?: number | object;
/**
* 992px
* 768px
*/
md?: number | object;
/**
* 1200px
* 992px
*/
lg?: number | object;
}
/**
* 1200px
*/
xl?: number | object;
/**
* 1600px
*/
xxl?: number | object;
}