[Analysis of element- UI source code] Button component article

The Button component mainly consists of the Button and button-group components

Button Source code of the current component directory:

button-group


=

=

=

=

=

=

=

=

=

=

=

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

button

Knowledge:

  1. Provider /inject: This pair of options needs to be used together to allow an ancestor component to inject a dependency into all of its descendants, no matter how deep the component hierarchy is, for as long as its upstream and downstream relationships are established.

  2. $emit: Emits an event on the current instance. Additional parameters are passed to the listener callback.

    The main purpose

    A parent component can use props to pass data to a child component.

    A child component can use $Emit to trigger custom events for the parent component.

<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
      type: String.default: "default",},size: String.// Size: medium/small/mini
    icon: {
      // Name of the icon class
      type: String.default: "",},nativeType: {
      // Native type attribute button/submit/reset
      type: String.default: "button",},loading: Boolean.// Whether to load the state
    disabled: Boolean.// Whether to disable
    plain: Boolean.// The plain button
    autofocus: Boolean.// Whether to focus by default
    round: Boolean.// Fillet button
    circle: Boolean.// Whether the button is circular
  },

  computed: {
    _elFormItemSize() {  // Get the size used to control the components in the form
      return (this.elFormItem || {}).elFormItemSize;
    },
    // this.$ELEMENT ? It is an object that receives the size parameters passed in when the ElementUI is initialized, and it contains two properties: size and zIndex, which make it easy to globally define the size of various components. Analogy to the body style inheritance in styles.
    buttonSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    buttonDisabled() {
      //1. Set disabled for button 2. Disable all components in the form. If this parameter is set to true, the disabled attribute on the components in the form no longer takes effect
      return this.disabled || (this.elForm || {}).disabled; }},methods: {
    handleClick(evt) {
      this.$emit("click", evt); ,}}};</script>

Copy the code