菜鳥讀Element源碼五el-button

el-button模仿代碼

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

<template>
  <button class="el-test-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :type="nativeType"
    :class="[ type ? 'el-test-button--' + type : '', buttonSize ? 'el-test-button--' + buttonSize : '', { 'is-test-disabled': buttonDisabled, 'is-test-loading': loading, 'is-test-plain': plain, 'is-test-round': round, 'is-test-circle': circle } ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>
<script>
export default {
  name: 'ElTestButton',
  componentsName: 'ElTestButton',
  props: {
    // 按鈕類型
    type: {
      type: String,
      default: 'default'
    },
    // 按鈕大小
    size: String,
    // 圖標
    icon: {
      type: String,
      default: ''
    },
    // 顯示加載動畫
    loading: Boolean,
    // 按鈕是否可用
    disabled: Boolean,
    // 是否樸素按鈕
    plain: Boolean,
    //是否圓角按鈕
    round: Boolean,
    //是否圓形按鈕
    circle: Boolean,
    //原生button屬性  包含 button submit  reset
    nativeType: {
      type: String,
      default: 'button'
    },
  },

  computed: {
    buttonSize() {
      return this.size
    },

    buttonDisabled() {
      return this.disabled
    }
  },

  methods: {
    handleClick(evt) {
      this.$emit('click', evt);
    }
  },
}
</script>


複製代碼

button相對簡單，並無什麼特別的屬性，值得一學的算是它的樣式了。在這裏卻是總結了一些學到的樣式知識。

樣式知識整理

• line-height

  line-height用於設定多行元素的空間量，如多行文本的間距。對於塊級元素，則能夠指定元素行盒的最小高度。

  line-height屬性：

  值	描述	是否被繼承
  inherit	繼承父元素的line-height	後代不設置line-height,則繼承當前
  數字	數字*元素字體大小	後代會繼承line-height數字的大小，自動計算本身的line-heigt
  長度	行高 會被後代繼承	後代不設置line-height,則繼承當前
  百分比	結果是百分比*元素字體大小	後代不設置line-height,則繼承當前計算獲得的最終值
  normal	取決於瀏覽器的默認值，即font-family	子元素不繼承line-height的值，根據自身font-size進行計算

測試代碼

<div style="line-height:20px;">
      line-height:20px
      <div style="font-size:20px;">
        20px child
      </div>
    </div>
    <div style="line-height:1.5">
      line-height:1.5
      <div style="font-size:20px;">
        1.5 child
      </div>
    </div>
    <div style="line-height:150%;">
      line-height:150%
      <div style="font-size:20px;">
        150% child
      </div>
    </div>
    <div style="line-height:normal">
      line-height:normal
      <div style="font-size:20px;">
        normal child
      </div>
    </div>
複製代碼

• :active 鼠標按下點擊以及鬆開時觸發

• 相鄰兄弟選擇器
  如 .el-button + .el-button 會匹配.el-button的相鄰兄弟元素.el-button(二者須要具備共同父元素), 但.el-button xxx .el-button後一個button不匹配，只匹配相鄰class。

• outline繪製位於元素周圍的一條線，位於邊框邊緣的外圍, 不佔據空間。有三個屬性 outline: color style width

• css選擇器總結

• 能夠參照W3cschool上的css選擇器總結。我在這裏寫出來只是列出經常使用的，本身再過一遍，加上本身的理解，W3school有點拗口誒。大佬請跳過。

選擇器	例子	例子描述
class	.demo1	選擇class="demo1"的全部元素
#id	#demo2	選擇id="demo2"的全部元素
*	*	選擇全部元素
element	p	選擇全部<p>元素
element,element	div，p	選擇全部<div> <p>元素
element element	div p	選擇<div>元素內部全部的<p> 不管包裹多少層，只要p在div內，均被選中
element>element	div>p	選擇父元素爲<div>的全部<p>， p的父層必須爲div
element + element	div+p	選擇緊接在<div>元素以後的<p>
[attribute]	[class]	<div>demo3</div> <div class>demo4</div> 含有class屬性的demo4會被選中。選中含有屬性attribute的元素
[attribute = value]	[class = 'demo5']	<div class="demo5"></div> <div class="demo6"></div> demo5會被選中。選中屬性attribute = value的元素
[attribute~= value]	[class ='demo']	<div class="demo7"></div> <div class="demo8"></div> <div class="demo"></div> 其中demo會被選中。選中屬性attribute中含有單詞value的元素
[attribute*=value]	[class="demo*"]	<div class='demo11'></div> <div class='11demo'></div> <div class='temp'></div> 其中demo11 11demo會被選中，選擇的是屬性中包含字符串value的元素
[attribute|=value	[class |=demo]	<div class="demo-9"></div> <div class="demo-10"></div> <div class="demo1"></div>。demo-9 demo-10會被選中。選中的是屬性值以value開頭的元素,屬性值需以-分隔
[attribute$=value	[class$='demo]	<div class='demo12'></div> <div class='12demo'></div> 選中class='12demo' 選擇的是以字符串value結尾的元素
:link	a:link	選擇全部未被訪問的連接
:visited	a:visited	選擇全部已被訪問的連接
:active	class:active	在鼠標按下以及鬆開時觸發
:hover	class:hover	鼠標懸停時觸發
:focus	class:focus	獲取焦點時觸發
:first-letter	p:first-letter	選擇每一個<p>元素的首字母
:first-line	p:first-line	選擇每一個<p>元素的首行
:before	p:before	在每一個<p>元素前插入
:after	p:after	在每一個<p>元素後插入
:not(selector)	not(p)	選擇非<p>元素的每一個元素
:nth-child(n)	.demo4 p:nth-child(2)	選擇class爲demo4下面的第二個p元素， p:nth-child(2)若是某個元素的子元素中第二個元素爲p， 則p被選中
:first-child	.demo p:first-child	選擇父元素class='demo'的子元素中第一個p元素
:last-child	.demo p:lastt-child	選擇父元素class='demo'的子元素中最後一個p元素

注

el-button組件中含有如下代碼我並無實現

inject: {
      elForm: {
        default: ''
      },
      elFormItem: {
        default: ''
      }
    },
複製代碼

computed: {
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      buttonDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
      }
    },
複製代碼

並非我不模仿，有看過大佬的element的button部分，而且按照這幾個變量的命名風格，應該是有和form表單有關，所以等到模仿form表單時再來作總結。立個flag先！ 一位不愛負責的大佬記得提醒我！僞裝有@

😀