col.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. export default {
  2. name: 'ElCol',
  3. props: {
  4. span: {
  5. type: Number,
  6. default: 24
  7. },
  8. tag: {
  9. type: String,
  10. default: 'div'
  11. },
  12. offset: Number,
  13. pull: Number,
  14. push: Number,
  15. xs: [Number, Object],
  16. sm: [Number, Object],
  17. md: [Number, Object],
  18. lg: [Number, Object],
  19. xl: [Number, Object]
  20. },
  21. computed: {
  22. gutter() {
  23. let parent = this.$parent;
  24. while (parent && parent.$options.componentName !== 'ElRow') {
  25. parent = parent.$parent;
  26. }
  27. return parent ? parent.gutter : 0;
  28. }
  29. },
  30. render(h) {
  31. let classList = [];
  32. let style = {};
  33. if (this.gutter) {
  34. style.paddingLeft = this.gutter / 2 + 'px';
  35. style.paddingRight = style.paddingLeft;
  36. }
  37. ['span', 'offset', 'pull', 'push'].forEach(prop => {
  38. if (this[prop] || this[prop] === 0) {
  39. classList.push(
  40. prop !== 'span'
  41. ? `el-col-${prop}-${this[prop]}`
  42. : `el-col-${this[prop]}`
  43. );
  44. }
  45. });
  46. ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
  47. if (typeof this[size] === 'number') {
  48. classList.push(`el-col-${size}-${this[size]}`);
  49. } else if (typeof this[size] === 'object') {
  50. let props = this[size];
  51. Object.keys(props).forEach(prop => {
  52. classList.push(
  53. prop !== 'span'
  54. ? `el-col-${size}-${prop}-${props[prop]}`
  55. : `el-col-${size}-${props[prop]}`
  56. );
  57. });
  58. }
  59. });
  60. return h(this.tag, {
  61. class: ['el-col', classList],
  62. style
  63. }, this.$slots.default);
  64. }
  65. };