菜鸟读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有点拗口诶。大佬请跳过。

注

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先！ 一位不爱负责的大佬记得提醒我！假装有@

😀