修复Grid栅格组件Col属性xl和xxl无效的问题
This commit is contained in:
parent
72653cc906
commit
f5656d0b7a
3 changed files with 36 additions and 8 deletions
|
@ -19,7 +19,9 @@
|
||||||
xs: [Number, Object],
|
xs: [Number, Object],
|
||||||
sm: [Number, Object],
|
sm: [Number, Object],
|
||||||
md: [Number, Object],
|
md: [Number, Object],
|
||||||
lg: [Number, Object]
|
lg: [Number, Object],
|
||||||
|
xl: [Number, Object],
|
||||||
|
xxl: [Number, Object]
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
@ -40,7 +42,7 @@
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
['xs', 'sm', 'md', 'lg'].forEach(size => {
|
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
|
||||||
if (typeof this[size] === 'number') {
|
if (typeof this[size] === 'number') {
|
||||||
classList.push(`${prefixCls}-span-${size}-${this[size]}`);
|
classList.push(`${prefixCls}-span-${size}-${this[size]}`);
|
||||||
} else if (typeof this[size] === 'object') {
|
} else if (typeof this[size] === 'object') {
|
||||||
|
|
|
@ -81,8 +81,26 @@
|
||||||
|
|
||||||
// Large grid
|
// 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) {
|
@media (min-width: @screen-lg-min) {
|
||||||
.make-grid(-lg);
|
.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
18
types/grid.d.ts
vendored
|
@ -54,19 +54,27 @@ export declare interface Col extends Vue {
|
||||||
*/
|
*/
|
||||||
'class-name'?: string;
|
'class-name'?: string;
|
||||||
/**
|
/**
|
||||||
* <768px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
* <576px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
||||||
*/
|
*/
|
||||||
xs?: number | object;
|
xs?: number | object;
|
||||||
/**
|
/**
|
||||||
* ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
* ≥576px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
||||||
*/
|
*/
|
||||||
sm?: number | object;
|
sm?: number | object;
|
||||||
/**
|
/**
|
||||||
* ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
* ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
||||||
*/
|
*/
|
||||||
md?: number | object;
|
md?: number | object;
|
||||||
/**
|
/**
|
||||||
* ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
* ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
||||||
*/
|
*/
|
||||||
lg?: number | object;
|
lg?: number | object;
|
||||||
}
|
/**
|
||||||
|
* ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
||||||
|
*/
|
||||||
|
xl?: number | object;
|
||||||
|
/**
|
||||||
|
* ≥1600px 响应式栅格,可为栅格数或一个包含其他属性的对象
|
||||||
|
*/
|
||||||
|
xxl?: number | object;
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue