Merge pull request #5393 from tianxing0923/2.0

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

Merge pull request #5393 from tianxing0923/2.0
修复Grid栅格组件Col属性xl和xxl无效的问题
Aresn · GitHub
2 parents 72653cc9 f5656d0b
Showing 3 changed files with 36 additions and 8 deletions Show diff stats
src/components/grid/col.vue
src/styles/common/layout.less
types/grid.d.ts
@@ -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') {
@@ -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);
+}
@@ -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;
-}
 \ No newline at end of file
+  /**
+   * ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
+   */
+  xl?: number | object;
+  /**
+   * ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象
+   */
+  xxl?: number | object;
+}