chenhaodong / mew-iview

Commit d6e14b116e5ce711cb9395933a9299c9211600e0

Authored by Aresn
Committed by GitHub
2 parents 72653cc9 f5656d0b

Merge pull request #5393 from tianxing0923/2.0 

修复Grid栅格组件Col属性xl和xxl无效的问题
Showing 3 changed files with 36 additions and 8 deletions   Show diff stats
Inline Side-by-side
src/components/grid/col.vue
  Show/Hide comments   View file @d6e14b1
... ... @@ -19,7 +19,9 @@
19 19 xs: [Number, Object],
20 20 sm: [Number, Object],
21 21 md: [Number, Object],
22   - lg: [Number, Object]
  22 + lg: [Number, Object],
  23 + xl: [Number, Object],
  24 + xxl: [Number, Object]
23 25 },
24 26 data () {
25 27 return {
... ... @@ -40,7 +42,7 @@
40 42 }
41 43 ];
42 44  
43   - ['xs', 'sm', 'md', 'lg'].forEach(size => {
  45 + ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
44 46 if (typeof this[size] === 'number') {
45 47 classList.push(`${prefixCls}-span-${size}-${this[size]}`);
46 48 } else if (typeof this[size] === 'object') {
... ...
src/styles/common/layout.less
  Show/Hide comments   View file @d6e14b1
... ... @@ -81,8 +81,26 @@
81 81  
82 82 // Large grid
83 83 //
84   -// Columns, offsets, pushes, and pulls for the large desktop device range.
  84 +// Columns, offsets, pushes, and pulls for the wide desktop device range.
85 85  
86 86 @media (min-width: @screen-lg-min) {
87 87 .make-grid(-lg);
88 88 }
  89 +
  90 +
  91 +// Extra large grid
  92 +//
  93 +// Columns, offsets, pushes, and pulls for the full hd desktop device range.
  94 +
  95 +@media (min-width: @screen-xl-min) {
  96 + .make-grid(-xl);
  97 +}
  98 +
  99 +
  100 +// Extra extra large grid
  101 +//
  102 +// Columns, offsets, pushes, and pulls for the large desktop device range.
  103 +
  104 +@media (min-width: @screen-xxl-min) {
  105 + .make-grid(-xxl);
  106 +}
... ...
types/grid.d.ts
  Show/Hide comments   View file @d6e14b1
... ... @@ -54,19 +54,27 @@ export declare interface Col extends Vue {
54 54 */
55 55 'class-name'?: string;
56 56 /**
57   - * <768px 响应式栅格，可为栅格数或一个包含其他属性的对象
  57 + * <576px 响应式栅格，可为栅格数或一个包含其他属性的对象
58 58 */
59 59 xs?: number | object;
60 60 /**
61   - * ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
  61 + * ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象
62 62 */
63 63 sm?: number | object;
64 64 /**
65   - * ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
  65 + * ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象
66 66 */
67 67 md?: number | object;
68 68 /**
69   - * ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
  69 + * ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象
70 70 */
71 71 lg?: number | object;
72   -}
73 72 \ No newline at end of file
  73 + /**
  74 + * ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象
  75 + */
  76 + xl?: number | object;
  77 + /**
  78 + * ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象
  79 + */
  80 + xxl?: number | object;
  81 +}
... ...