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

😀