菜鳥讀element源碼三 el-col

內容

如下是我模仿並註釋的代碼

模仿代碼中均以el-test 替換el, 目的是爲了邊模仿邊測試和el組件的效果對比

export default {
  name: 'ElTestCol',

  // col組件所接受參數
  props: {
    // 寬度 默認爲24
    span: {
      type: Number,
      default: 24
    },
    // 偏移量
    offset: Number,
    // 左側偏移量
    pull: Number,
    // 右側偏移量
    push: Number
  },

  computed: {
    gutter () {
      let parent = this.$parent
      //循環找到row組件或者row不存在跳出循環。
      while (parent && parent.$options.componentName !== 'ElTestRow') {
        parent = this.$parent
      }
      return parent ? parent.gutter : 0
    }
  },

  render(h) {
    let classStyle = []
    let style = {}

    if (this.gutter) {
      style.paddingLeft = `${this.gutter/2}px`
      style.paddingRight = style.paddingLeft
    }

    // 遍歷屬性 查詢對應的class
    ['span', 'offset', 'pull', 'push'].forEach(prop => {
      //保證屬性存在時才添加class
      if(this[prop] || this[prop]===0)
        classStyle.push(
          prop !== 'span'?
          `el-test-col-${prop}-${this[prop]}`:
          `el-test-col-${this[prop]}`
        )
    })
    return h('div', 
    {
      class: ['el-test-col', classStyle],
      style
    }, 
    this.$slots.default)
  },
}
複製代碼

看了col的源碼 ，加上本身的實踐， 感受el-col和el-row是應該嵌套起來使用（以爲能夠減小計算gutter時候的循環消耗）。

另外就是在實現col.css的時候，發現其實有不少class長的十分類似，源碼中是這樣

.el-col-1 {
  width: 4.16667%;
}
.el-col-offset-1 {
  margin-left: 4.16667%;
}
.el-col-pull-1 {
  right: 4.16667%;
}
.el-col-push-1 {
  left: 4.16667%;
}
.el-col-2 {
  width: 8.33333%;
}
.el-col-offset-2 {
  margin-left: 8.33333%;
}
.el-col-pull-2 {
  right: 8.33333%;
}
.el-col-push-2 {
  left: 8.33333%;
}
.el-col-3 {
  width: 12.5%;
}
複製代碼

若是可以進行循環就行了，這時候閱讀了索尼大佬的文章，發現了scss的強大做用 若是咱們把上述css用scss實現

@for $i from 0 through 24 {
  // 柵格寬度
  .el-test-col-#{$i}{
    width: (1 / 24 * 100 * $i) * 1%;
    border: 1px solid #DCDCDC;
  }

  // 柵格右移
  .el-test-col-offset-#{$i}{
    margin-left: (1 / 24 * 100 * $i) * 1%;
  }

  // 柵格左移
  .el-test-col-pull-#{$i}{
    right:  (1 / 24 * 100 * $i) * 1%;
  }

  // 柵格右移
  .el-test-col-push-#{$i}{
    left:  ( 1 / 24 * 100 * $i) * 1%;
  }
}
複製代碼

是否是很簡潔，若是用css 須要24個col 24個push 24個pull 24個offset 而且維護也會很麻煩。

疑問一 css是scss打包生成的嗎？打包scss生成css要怎麼作

element的文件夾下不只有css文件 還有對應的scss文件，有沒有大佬知道css是scss文件打包後生成的嗎？由於我以爲 好像沒有必要說 scss寫一遍，css再來一遍

總結

col組件相對簡單，沒什麼值得特別注意的，固然能夠順手學一波scss仍是頗有必要的。 順便說一下 scss文件放在 element-ui/packages/theme-chalk/src