前言

團隊要根據(jù)新的 UI 規(guī)范實現(xiàn)一個組件庫，button 組件規(guī)范要支持多種主題換膚，字體顏色、背景顏色、邊框和禁用使用新的規(guī)范，并且一種主題顏色主要組件上使用兩種主題顏色混合。另外，增加多一種幽靈按鈕類型，經(jīng)過分析，在 element-ui 的 button 組件上改造麻煩，不好維護(hù)，所以需要造一個 button 組件，閱讀 element-ui 組件庫 button 的源碼設(shè)計，參考 element-plus css 自定義變量 實現(xiàn)

element-ui 源碼分析 button

button 屬性

button文檔屬性 可以定義按鈕的尺寸（size），類型（type），樸素樣式（plain），圓角（round），圓形（circle），加載（loading），禁用（disabled），圖標(biāo)（icon），是否聚焦（autofocus）等

button 使用

<template>
  <div>
    <el-button>默認(rèn)按鈕</el-button>

    <!-- 尺寸（size）：medium（中等），small（小型），mini（超?。?-->
    <el-button size="medium">中等按鈕</el-button>

    <!-- 類型（type）：default（默認(rèn)），primary（主要），success（成功），info（信息），warning（警告），danger（危險），text（文本） -->
    <el-button type="primary">主要按鈕</el-button>
    <el-button type="text">文字按鈕</el-button>

    <!-- 樸素（plain）：true，false -->
    <el-button type="primary" plain>主要按鈕</el-button>

    <!-- 圓角（round）：true，false -->
    <el-button round>主要按鈕</el-button>

    <!-- 圓形（circle）：true，false。一般與圖標(biāo) icon 連用 -->
    <el-button icon="el-icon-search" circle></el-button>

    <!-- 禁用（disabled）：true，false。按鈕顏色變淺，鼠標(biāo)懸浮出現(xiàn)禁止符號。 -->
    <el-button disabled>禁用按鈕</el-button>

    <!-- 圖標(biāo)（icon）：設(shè)置icon屬性即可，可以參考 icon 組件。設(shè)置在文字右邊的 icon ，需要使用i標(biāo)簽，此時最好添加上 el-icon--right 類。 -->
    <el-button type="primary" icon="el-icon-edit">圖標(biāo)按鈕</el-button>
    <el-button type="primary"
      >圖標(biāo)按鈕<i class="el-icon-edit el-icon--right"></i
    ></el-button>

    <!-- 加載（loading）：true，false。為 true 時點擊事件失效。 -->
    <el-button type="primary" :loading="true">加載中</el-button>
  </div>
</template>

Button 源碼分析

相關(guān)文件路徑：

• packages/button/src/button.vue button vue 單文件組件
• packages/theme-chalk/src/common/var.scss#L506-L591 按鈕 SCSS 變量名文件
• packages/theme-chalk/button.scss 按鈕樣式文件
• packages/theme-chalk/mixins/_button.scss 按鈕混入樣式文件，公共混入代碼，例如按鈕不同 type 樣式、按鈕plain樸素樣式、按鈕size大小樣式
• packages/theme-chalk/minxins.scss 混入樣式文件， 包括 bem 規(guī)范、when狀態(tài) mixin 代碼片段，例如 b(button) 會轉(zhuǎn)化為 el-button

button.vue 文件

button.vue文件路徑

props 的屬性在文檔說明中都有提到，是對組件的擴展

• type: 拼接在 el-button-- 后面，生成不同的 class 類，重新定義 color、background-color、border-color 覆蓋 el-button 默認(rèn)樣式
• size：外部控制按鈕大小，同時可以被表單元素和全局控制，el-button-- + size 類樣式，例如 el-button--small
• icon：支持不同的圖標(biāo)，加載中的圖標(biāo)只能使用 el-icon-loading
• nativeType：按鈕的原生類型，默認(rèn)是 button，可以是 submit、reset 等
• loading：加載中的狀態(tài)，is-loading 樣式，按鈕會被禁用
• disabled：禁用按鈕，is-disabled 類樣式，使用 when(disabled) 生成
• plain：樸素按鈕，is-plain類樣式
• autofocus：自動聚焦，focus 狀態(tài)樣式按鈕
• round：圓角樣式 is-round
• circle：圓心樣式 is-circle，一般配合 icon 圖標(biāo)使用

// button.vue 源碼

<template>
  <!-- 原生的 button 進(jìn)行樣式封裝。 -->
  <button
    class="el-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      buttonSize ? 'el-button--' + buttonSize : '',
      {
        'is-disabled': buttonDisabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle
      }
    ]"
  >
    <!-- 
      1. el-icon-loading 是加載圖標(biāo)類，
      2. 這里使用了兩個 <i></i> 都是用來放圖標(biāo)的，會根據(jù) loading 的值進(jìn)行二選一
         并且 loading = ture 加載狀態(tài)無法使用其他圖標(biāo)，同時外層 button 被設(shè)置為 disabled
    -->
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>

    <!-- 按鈕文本插槽，default 屬性包括了所有沒有被包含在具名插槽中的節(jié)點 -->
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

SCSS 變量文件

common/var.scss 公共變量文件源碼 定義公共樣式和所有組件樣式變量的文件，例如主題顏色、字體顏色、字體大小等，可以通過這個文件實現(xiàn)組件庫的換膚

例如主題變量 $--color-primary

mix 函數(shù)是將兩種顏色按不同的占比混合生成一個新的顏色，例如 mix($--color-white, $--color-primary, 10%), $--color-white 顏色占比 10%，$--color-primary 占比 90%，生成一種新的顏色

$--color-primary: #409EFF !default;
/// color|1|Background Color|4
$--color-white: #FFFFFF !default;
/// color|1|Background Color|4
$--color-black: #000000 !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; 

BEM CSS規(guī)范

element 的樣式規(guī)范是使用 bem 管理，根據(jù)規(guī)范生成類名，避免樣式污染，bem 函數(shù)的公共代碼片段定義在 packages/theme-chalk/src/mixins/mixins.scss 文件

theme-chalk/src/mixins/config.scss 定義命名空間

$namespace: 'el';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';

1、b 是 block 的 mixin簡寫函數(shù)，調(diào)用 @include b(button) 參數(shù) $block 賦值 button, 拼接命名空間變量 $namespace el 得到 el-button, !global 改為全局變量，可以給下文使用， @content 占位符插入內(nèi)容

@mixin b($block) {
  $B: $namespace+'-'+$block !global;

  .#{$B} {
    @content;
  }
}

使用 @mixin b 代碼片段

@include b(button) {
  display: inline-block;
  line-height: 1;
}

編譯結(jié)果是

.el-button {
  display: inline-block;
  line-height: 1;
}

2、e 是 element 的簡寫函數(shù)，@include e(icon) 調(diào)用，$element 傳入 icon，在上面 b 函數(shù)已經(jīng)將 $B 賦值為全局變量 el-button，$currentSelector 拼接后得到 .el-button__icon，@at-root 是跳出嵌套，和 .el-button 同級，而不是 .el-button .el-button-icon 拼接在后面

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

3、m 修飾符函數(shù)，傳入 primary, 遍歷 $modifier 只有一個元素，遍歷結(jié)果后 $currentSelector 賦值是 &--primary，在scss 編譯， & 是上級類 el-button，編輯是 el-button--primary

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

使用 m 函數(shù)

@include b(button) {
  @include m(primary) {
  
  }
}

編譯結(jié)果是

.el-button--primary {
  
}

button.scss 組件樣式

組件庫的樣式單獨單獨放在一個目錄管理，通過 gulp 打包，源碼路徑 packages/theme-chalk/src/button.scss

@include b(button) 定義 el-button 類樣式，& + & 相鄰兩個按鈕左間距 10px，button-size 是生成按鈕的大小，設(shè)計水平、垂直的內(nèi)邊距，字體大小和邊框圓角，抽象出方法定義在 packages/theme-chalk/src/mixins/_button

@include b(button) {
  // 基本樣式，默認(rèn)樣式，在未指定 type 之前
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: $--button-default-background-color;	// 默認(rèn)背景色， white
  border: $--border-base;	// 1px solid #DCDFE6
  border-color: $--button-default-border-color;		// #DCDFE6
  color: $--button-default-font-color;	// #606266
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: $--button-font-weight;	// 500

  // 在 packages/theme-chalk/src/mixins/utils ，主要是 moz,webkit,ms 的用戶選擇設(shè)置
  @include utils-user-select(none);

  // 兄弟節(jié)點之間
  & + & {
    margin-left: 10px;
  }

  // 在 packages/theme-chalk/src/mixins/_button，設(shè)置按鈕邊距、字體、邊框弧度
  @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);

  // 懸浮、聚焦按鈕樣式
  &:hover,
  &:focus {
    color: $--color-primary;
    border-color: $--color-primary-light-7;
    background-color: $--color-primary-light-9;
  }

  &::-moz-focus-inner {
    border: 0;
  }

  // 按鈕圖標(biāo)和文字的間距
  & [class*="el-icon-"] {
    & + span {
      margin-left: 5px;
    }
  }
  ...
}

when 函數(shù) 是定義不同狀態(tài)的樣式，$state-prefix 是 is-，傳入狀態(tài)類型拼接，例如 when(loading) 是 .el-button.is-loading

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

when(plain)、when(active)、when(disabled)、when(loading)、when(round)、when(circle) 分別定義 is-plain，is-active、is-disabled、is-loading、is-round、is-circle，這也是 button prop 傳入的屬性，生成不同的類樣式顯示

@include when(plain) {
    &:hover,
    &:focus {
      background: $--color-white;
      border-color: $--color-primary;
      color: $--color-primary;
    }

    &:active {
      background: $--color-white;
      border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
      outline: none;
    }
  }

  @include when(active) {
    color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
    border-color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
  }

  @include when(disabled) {
    &,
    &:hover,
    &:focus {
      color: $--button-disabled-font-color;
      cursor: not-allowed;
      background-image: none;
      background-color: $--button-disabled-background-color;
      border-color: $--button-disabled-border-color;
    }

    &.el-button--text {
      background-color: transparent;
    }

    &.is-plain {
      &,
      &:hover,
      &:focus {
        background-color: $--color-white;
        border-color: $--button-disabled-border-color;
        color: $--button-disabled-font-color;
      }
    }
  }

  @include when(loading) {
    position: relative;
    pointer-events: none;

    &:before {
      pointer-events: none;
      content: '';
      position: absolute;
      left: -1px;
      top: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: inherit;
      background-color: rgba(255,255,255,.35);
    }
  }
  @include when(round) {
    border-radius: 20px;
    padding: 12px 23px;
  }
  @include when(circle) {
    border-radius: 50%;
    padding: $--button-padding-vertical;
  }

例如 is-plain 樣式

組件傳入 type，是通過下面 m() 函數(shù)定義不同的 class，button-variant 代碼片段是定義在 mixins/_button,

@include m(primary) {
    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
  }
  @include m(success) {
    @include button-variant($--button-success-font-color, $--button-success-background-color, $--button-success-border-color);
  }
  @include m(warning) {
    @include button-variant($--button-warning-font-color, $--button-warning-background-color, $--button-warning-border-color);
  }
  @include m(danger) {
    @include button-variant($--button-danger-font-color, $--button-danger-background-color, $--button-danger-border-color);
  }
  @include m(info) {
    @include button-variant($--button-info-font-color, $--button-info-background-color, $--button-info-border-color);
  }

button-variant 傳入不同的 color、background-color、border-color 變量覆蓋 default 默認(rèn)按鈕的字體顏色、背景顏色和邊框顏色，并且定義了偽類 hover、focus、active、disabled 交互狀態(tài)，顏色變淺通過 mix 和 白色 混合

@mixin button-variant($color, $background-color, $border-color) {
  color: $color;
  background-color: $background-color;
  border-color: $border-color;

  &:hover,
  &:focus {
    background: mix($--color-white, $background-color, $--button-hover-tint-percent);
    border-color: mix($--color-white, $border-color, $--button-hover-tint-percent);
    color: $color;
  }
  
  &:active {
    background: mix($--color-black, $background-color, $--button-active-shade-percent);
    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
    color: $color;
    outline: none;
  }

  &.is-active {
    background: mix($--color-black, $background-color, $--button-active-shade-percent);
    border-color: mix($--color-black, $border-color, $--button-active-shade-percent);
    color: $color;
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: $--color-white;
      background-color: mix($background-color, $--color-white);
      border-color: mix($border-color, $--color-white);
    }
  }

  &.is-plain {
    @include button-plain($background-color);
  }
}

&.is-plain 類覆蓋主要按鈕的顏色得到樸素按鈕，使用 button-plain($background-color) 定義在同一個文件，偽類也是定義 color、background-color、border-color 覆蓋

@mixin button-plain($color) {
  color: $color;
  background: mix($--color-white, $color, 90%);
  border-color: mix($--color-white, $color, 60%);

  &:hover,
  &:focus {
    background: $color;
    border-color: $color;
    color: $--color-white;
  }

  &:active {
    background: mix($--color-black, $color, $--button-active-shade-percent);
    border-color: mix($--color-black, $color, $--button-active-shade-percent);
    color: $--color-white;
    outline: none;
  }

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: mix($--color-white, $color, 40%);
      background-color: mix($--color-white, $color, 90%);
      border-color: mix($--color-white, $color, 80%);
    }
  }
}

button 提供 4 種按鈕大小，默認(rèn)是最大的按鈕，還有 medium 中等、small 小的和 mini 特小的，它是調(diào)用 button-size 傳入不同的垂直、水平的內(nèi)間距、字體大小和邊框圓角變量值，定義按鈕的大小

  @include m(medium) {
    @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
    @include when(circle) {
      padding: $--button-medium-padding-vertical;
    }
  }
  @include m(small) {
    @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
    @include when(circle) {
      padding: $--button-small-padding-vertical;
    }
  }
  @include m(mini) {
    @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
    @include when(circle) {
      padding: $--button-mini-padding-vertical;
    }
  }

button-size 代碼定義在 mixin/_button.scss

@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: $padding-vertical $padding-horizontal;
  }
}

按鈕支持文本類型 el-button--text，將 border、background 變透明，設(shè)置不同的字體顏色，定義偽類狀態(tài)

  @include m(text) {
    border-color: transparent;
    color: $--color-primary;
    background: transparent;
    padding-left: 0;
    padding-right: 0;

    &:hover,
    &:focus {
      color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
      border-color: transparent;
      background-color: transparent;
    }
    &:active {
      color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
      border-color: transparent;
      background-color: transparent;
    }

    &.is-disabled,
    &.is-disabled:hover,
    &.is-disabled:focus {
      border-color: transparent;
    }
  }
}

總結(jié)一下，button 按鈕的樣式變量定義在 commont/var.scss 維護(hù)，其他組件也是這種做法，這樣就做到只需要修改 var.scss 文件就可以實現(xiàn)組件庫的換膚。

按鈕的樣式規(guī)范使用 bem 規(guī)范，@include b(button) 定義基礎(chǔ)類樣式 el-button；按鈕大小是通過 @include button-size（...) 傳入內(nèi)邊距、字體大小變量控制顯示。

不同的按鈕 type 類型、偽類狀態(tài)還有樸素按鈕，通過修改 color、background-color、border-color 覆蓋默認(rèn)樣式，顏色變淺通過 mix 函數(shù)混合白色生成新的顏色，文本按鈕、按鈕組還有不同的按鈕狀態(tài)根據(jù) bem 規(guī)范生成類樣式定義。

通過學(xué)習(xí)優(yōu)秀的組件庫設(shè)計，發(fā)現(xiàn)處處設(shè)計的很巧妙，站在巨人的肩膀上學(xué)習(xí)。文章來源地址http://www.zghlxwxcb.cn/news/detail-402489.html

到了這里，關(guān)于element-ui 組件庫 button 源碼分析的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！