element row源码

row.js

export default {
  name: 'ElRow',

  componentName: 'ElRow',

  props: {
    // 标签
    tag: {
      type: String,
      default: 'div'
    },
    // 栅格间隔    number    —    0
    gutter: Number,
    // 布局模式，可选 flex，现代浏览器下有效
    type: String,
    // flex 布局下的水平排列方式    string    start/end/center/space-around/space-between
    justify: {
      type: String,
      default: 'start'
    },
    // flex 布局下的垂直排列方式    string    top/middle/bottom    top
    align: {
      type: String,
      default: 'top'
    }
  },

  computed: {
    // 样式
    style () {
      const ret = {};

      if (this.gutter) {
        ret.marginLeft = `-${this.gutter / 2}px`;
        ret.marginRight = ret.marginLeft;
      }

      return ret;
    }
  },

  render (h) {
    return h(this.tag, {
      class: [
        'el-row',
        this.justify !== 'start' ? `is-justify-${this.justify}` : '',
        this.align !== 'top' ? `is-align-${this.align}` : '',
        { 'el-row--flex': this.type === 'flex' }
      ],
      style: this.style
    }, this.$slots.default);
  }
};