Introduction to the

A Button is probably the simplest component, because there are not many things involved in a Button, except to respond to click events and write specific styles. At most one loading state is added to forbid clicking. Here is Element’s Button

Button source code analysis

Directly on the code, the code is not much

<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',
    inject: {
      elForm: {
        default: ' '
      },
      elFormItem: {
        default: ' '
      }
    },
    props: {
      type: {
        type: String,
        default: 'default'
      },
      size: String,
      icon: {
        type: String,
        default: ' '
      },
      nativeType: {
        type: String,
        default: 'button'
      },
      loading: Boolean,
      disabled: Boolean,
      plain: Boolean,
      autofocus: Boolean,
      round: Boolean,
      circle: Boolean
    },
    computed: {
      _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize;
      },
      buttonSize() {
        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
      },
      buttonDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
      }
    },
    methods: {
      handleClick(evt) {
        this.$emit('click', evt); }}}; </script>Copy the code


encapsulates a native button. There is one thing about a native button that needs to be noted. Always specify a type attribute for the



display:inline-block
-webkit-appearence:none
padding
line-height:1


@click=”handleClick” this is important, this shows that the native button is bound to the click event, we use this component as shown below

@click
handleClick 

methods: {
      handleClick(evt) {
        this.$emit('click', evt); }}Copy the code

Here we are actually using Vue’s built-in event system to trigger a click event to the parent, which is

. Since we are actually clicking on the native button, we are listening on the

component, so we need to send the click event to the parent. The parent listens for the click event, and the second argument is the event object. HandleClick will not trigger any click effects if it is not written

The third sentence: disabled = “buttonDisabled | | loading” represent the disabled state of the control button, pay attention to the disabled is a native of attributes, when it is true, the button cannot be click, and the mouse hover style is not small, The disabled state is jointly determined by the loading state and whether the user – defined disabled state is disabled. The user – defined disabled state is converted into a computing property as follows. The following items represent the content related to the form. One is to disable functions, which is achieved by the native Disabled property, and the other is to disable styles, which is achieved by graying buttons and cursor: not-AlOWED and displaying the mouse as a forbidden flag

buttonDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
 }
Copy the code

If “autofocus” is true, the button automatically gets focus, which is the state of the button as focus. It can be used to remind users :type=”nativeType” indicates the nativeType of the button. Button,reset or Submit, and then there are different classes for controlling buttons

:class="[ type ? 'el-button--' + type : '', buttonSize ? 'el-button--' + buttonSize : '', { 'is-disabled': buttonDisabled, 'is-loading': loading, 'is-plain': plain, 'is-round': round, 'is-circle': circle } ]"
Copy the code

The class in the object controls whether the button is loaded, plain, rounded, or round

<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>
Copy the code

Animation: Rotating 2s linear infinite animation: Rotating 2s linear infinite animation: Rotating 2s linear infinite

The second I tag is the icon of the button, which is set by the user and is hidden in the loading state. The tag is present if and only if there is content in

. The content is placed in the slot slot

Note that when the button is clicked, the style will also change. In the figure below, the success button is clicked into dark color, which is implemented by CSS: Active pseudo-class. I used to think that only a tag has active pseudo-class

Now, the size control of buttons, which is really easy,

buttonSize ? 'el-button--' + buttonSize : ''
buttonSize

To sum up, we know that the various attributes of the component will eventually be converted to the corresponding class to control the style of the button, that is, concatenate strings in :class

ButtonGroup source code analysis

A ButtonGroup is a group of buttons that groups multiple buttons together, as shown below

el-button-group
display:inline-block 

<template>
  <div class="el-button-group">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'ElButtonGroup'
  };
</script>
Copy the code

The CSS pseudo-classes: last-Child and: first-Child and :not, : first-Child selectors are used to select the first child of the parent element. That is, if multiple P tags of the same rank are placed together, Their parent element is div, so p:first-child selects the SCSS code below the first P tag

@each $type in (primary, success, warning, danger, info) {
    .el-button--#{$type} {&:first-child {border-right-color: rgba($--color-white, 0.5); } &:last-child {border-left-color: rgba($--color-white, 0.5); } &:not(:first-child):not(:last-child) {border-left-color: rgba($-- white-white, 0.5); Border - right - color: rgba ($- color - white, 0.5); }}}Copy the code

For elements that are neither the first nor the last, set a two-sided border. Note that only the color of the border is set. All buttons have a border by default, and the color is the same as the main color of the button. So just changing the color here will do the trick