「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

前言

前端领域优秀的组件框架，如ant-deisgn、element-ui等等都有自己的组件机制，现在我想介绍element-ui库里的button组件，让大家能对组件开发及维护有更进一步的了解。

`Button`组件

用外部传来的属性type来区分不同的button类型

<template>
  <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
      }
    ]"
  >
    <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: 'ElButton',
  }
</script>

上面的要点如下：

$slots.default指<el-button>里的默认内容，如<el-button>我是默认插槽内容=>$slots.default</el-button>
<script>里name名称一定要写明，若为驼峰方式命名，则组件引入时，使用破折号相连，且大写字母变小写，如ElButton变为el-button
type ? 'el-button--' + type : '',这段代码很关键，其中el在scss里定义为$namespace变量，button、type分别以变量的方式，传入至scss里的b以及m函数

`Button`样式

定义基础变量

$namespace: 'el';
$modifier-separator: '--';

定义颜色基础值

!default为sass语法，其作用和js里的let变量类似，开始时用其定义变量的默认值，若后期改变其默认值，则使用新值

/* Color
-------------------------- */
/// color|1|Brand Color|0
$--color-primary: #409EFF !default;
/// color|1|Functional Color|1
$--color-success: #67C23A !default;
/// color|1|Functional Color|1
$--color-warning: #E6A23C !default;
/// color|1|Functional Color|1
$--color-danger: #F56C6C !default;
/// color|1|Functional Color|1
$--color-info: #909399 !default;

定义边框基础值

/* Border
-------------------------- */
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;
/// borderRadius|1|Radius|0
$--border-radius-base: 4px !default;

定义按钮基础值

/* Button
-------------------------- */
/// color||Color|0
$--button-default-font-color: $--color-text-regular !default;
/// color||Color|0
$--button-default-background-color: $--color-white !default;
/// color||Color|0
$--button-default-border-color: $--border-color-base !default;

定义按钮样式

我们需先了解下面sass的基础语法点：

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。@include 指令可以将混入（mixin）引入到文档中。

我们先在mixins.scss里定义b混入

@mixin b($block) {
  $B: $namespace+'-'+$block !global; // !global全局变量

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

在mixins.scss继续定义m混入

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

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

在button.scss里引入mixins.scss

@include b(button) {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: $--button-default-background-color;
  border: $--border-base;
  border-color: $--button-default-border-color;
  color: $--button-default-font-color;
  
  @include m(primary) {
    @include button-variant($--button-primary-font-color, $--button-primary-background-color, $--button-primary-border-color);
  }
}

这里的b(button)会被解析成为el-button，m(primary)会被解析为el-button--primary

在此不得不感慨scss功能的强大，我之前所做的很多项目里完全没有发挥其作用，基本上都是用css的语法在编写sass，希望这篇文章能帮助到大家，谢谢~

Vue结合Sass编写Button基础组件

前言

Button组件

Button样式