element-ui element-plus row col - 分析

源代码地址-row
源代码地址-col

version:element-plus 1.0.1-beta.0

row

/*
 * @Description:
 * @Author: huxianc
 * @Date: 2020-12-01 09:39:53
 * @LastEditors: huxianc
 * @LastEditTime: 2020-12-21 11:47:29
 */
import { defineComponent, computed, h, provide } from 'vue'
export default defineComponent({
  name: 'ElRow',
  props: {
    // 渲染标签
    tag: {
      type: String,
      default: 'div',
    },
    // 栅格间隔
    gutter: {
      type: Number,
      default: 0,
    },
    // 布局模式，可选 flex，现代浏览器下有效
    type: {
      type: String,
      default: '',
    },
    // flex 布局下的水平排列方式
    justify: {
      type: String,
      default: 'start',
    },
    // flex 布局下的垂直排列方式
    align: {
      type: String,
      default: 'top',
    },
  },
  setup(props, { slots }) {
    // 注入到col中
    provide('ElRow', props.gutter)

    const style = computed(() => {
      const ret = { marginLeft: '', marginRight: '' }
      if (props.gutter) {
        // 栅格间隔左右平分
        ret.marginLeft = `-${props.gutter / 2}px`
        ret.marginRight = ret.marginLeft
      }
      return ret
    })

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

col

import { defineComponent, computed, inject, h } from 'vue'
import type { PropType } from 'vue'

type SizeObject = {
  span: number
  offset: number
}
const ElCol = defineComponent({
  name: 'ElCol',
  props: {
    // 栅格占据的列数
    span: {
      type: Number,
      default: 24,
    },
    // 栅格左侧的间隔格数
    offset: {
      type: Number,
      default: 0,
    },
    // 栅格向左移动格数
    pull: {
      type: Number,
      default: 0,
    },
    // 栅格向右移动格数
    push:{
      type:  Number,
      default: 0,
    },
    // type SizeObject = {
    //   span: number;
    //   offset: number;
    // }
    // <768px 响应式栅格数或者栅格属性对象
    xs: {
      type: [Number, Object] as PropType<number | SizeObject>,
      default: () => ({} as SizeObject),
    },
    // ≥768px 响应式栅格数或者栅格属性对象
    sm: {
      type: [Number, Object] as PropType<number | SizeObject>,
      default: () => ({} as SizeObject),
    },
    // ≥992px 响应式栅格数或者栅格属性对象
    md: {
      type: [Number, Object] as PropType<number | SizeObject>,
      default: () => ({} as SizeObject),
    },
    // ≥1200px 响应式栅格数或者栅格属性对象
    lg: {
      type: [Number, Object] as PropType<number | SizeObject>,
      default: () => ({} as SizeObject),
    },
    // ≥1920px 响应式栅格数或者栅格属性对象
    xl: {
      type: [Number, Object] as PropType<number | SizeObject>,
      default: () => ({} as SizeObject),
    },
  },
  setup(props, { slots }) {
    // 拿到row中注入的gutter
    const gutter = inject('ElRow', 0)

    const style = computed(() => {
      // 不为0 就 左右padding个一半
      if (gutter) {
        return {
          paddingLeft: gutter / 2 + 'px',
          paddingRight: gutter / 2 + 'px',
        }
      }
      return {}
    })
    const classList = computed(() => {
      const ret: string[] = []
      const pos = ['span', 'offset', 'pull', 'push'] as const
      pos.forEach(prop => {
        const size = props[prop]
        if (typeof size === 'number' && size >= 0) {
          ret.push(prop !== 'span' ? `el-col-${prop}-${props[prop]}` : `el-col-${props[prop]}`)
        }
      })
      const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
      sizes.forEach(size => {
        if (typeof props[size] === 'number') {
          ret.push(`el-col-${size}-${props[size]}`)
        } else if (typeof props[size] === 'object') {
          const sizeProps = props[size]
          Object.keys(sizeProps).forEach(prop => {
            ret.push(
              prop !== 'span' ? `el-col-${size}-${prop}-${sizeProps[prop]}` : `el-col-${size}-${sizeProps[prop]}`,
            )
          })
        }
      })
      return ret
    })

    return () =>h(
      'div',
      {
        class: ['el-col', classList.value],
        style: style.value,
      },
      slots.default?.(),
    )
  },
})

export default ElCol