el-col 源码解析

export default {

  name: 'ElCol',

  


  props: {

    span: { // 栅格占据的列数

      type: Number,

      default: 24

    },

    tag: { // 自定义元素标签。默认是div

      type: String,

      default: 'div'

    },

    offset: Number,

    pull: Number,

    push: Number,

    xs: [Number, Object],

    sm: [Number, Object],

    md: [Number, Object],

    lg: [Number, Object],

    xl: [Number, Object]

  },

  


  computed: {

    gutter() {

//如果<el-col>是<el-row>的子组件的话，根据<el-row :gutter='xxx'>的gutter设置左右边距

      let parent = this.$parent;

      while (parent && parent.$options.componentName !== 'ElRow') {

        parent = parent.$parent;

      }

      return parent ? parent.gutter : 0;

    }

  },

  render(h) {

    let classList = [];

    let style = {};

  


    if (this.gutter) {

      style.paddingLeft = this.gutter / 2 + 'px';

      style.paddingRight = style.paddingLeft;

    }

  


    ['span', 'offset', 'pull', 'push'].forEach(prop => {

      if (this[prop] || this[prop] === 0) { //如果属性存在

        // 在类名列表中添加对应的类名

        classList.push(

          prop !== 'span'

            ? `el-col-${prop}-${this[prop]}`

            : `el-col-${this[prop]}`

        );

      }

    });

  


    ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {

      if (typeof this[size] === 'number') { //如果传进来的参数类型为Number

        classList.push(`el-col-${size}-${this[size]}`); //比如size=md,md=6,则添加类el-col-md-6

      } else if (typeof this[size] === 'object') { //如果传进来的参数类型为object

        let props = this[size];

        Object.keys(props).forEach(prop => { //假如md={span=6,offset=6},则遍历[span,offset]

          classList.push(

            prop !== 'span'

              ? `el-col-${size}-${prop}-${props[prop]}`

              : `el-col-${size}-${props[prop]}`

          );

        });

      }

    });

  


    return h(this.tag, {

      class: ['el-col', classList],

      style

    }, this.$slots.default);

  }

};