Введение

Кнопка (Button), вероятно, является самым простым компонентом (компонент Icon умолял, TM я даже не нажимал на событие), поскольку Button представляет собой что-то действительно маленькое, не что иное, как реакция на события щелчка и определенный стиль письма, большинство плюс состояние загрузки запрещено нажатием кнопки, рисунок представляет собой схематический вид кнопки элемента, официальный сетевой кодкликните сюда

В основном он разделен на прямоугольные, закругленные и круглые кнопки.Цвет кнопок здесь выглядит очень комфортно.Например, цвет кнопки опасности не #ff0000, а немного светло-красный, а визуальный эффект мягче. Вы можете учиться у этих цветов

Анализ исходного кода кнопки

Переходим непосредственно к коду, объем кода невелик

<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>

Разбираем пошагово, во-первых, очень понятно,<el-button>Он просто инкапсулирует нативную кнопку. На нативную кнопку есть место, на которое стоит обратить внимание. Пожалуйста, всегда будьте<button>Элемент определяет атрибут типа. разные пары браузеров<button>Атрибут типа элемента использует другое значение по умолчанию, есть 3 значения,button,submit,resetПредставляет кнопки, отправить, сбросить, соответственно. И если вы используете в HTML-форме<button>элемент, разные браузеры могут отправлять разные значения кнопки. пожалуйста, используйте<input>Создание кнопок в HTML-формах

Давайте посмотрим на первое предложениеclass="el-button", Здесь объявляется базовый класс кнопки, то есть общий для всех кнопок стиль, см. рисунок ниже

Вы можете видеть, что есть несколько стилей, которые являются более важными, первый из нихdisplay:inline-block, указывает, что кнопки распределены внутри блока, ряд может иметь несколько расположений, а ширину и высоту можно контролировать,-webkit-appearence:noneЭто значит убрать нативный стиль кнопки.Во-первых, это слишком некрасиво.На самом деле разные браузеры ведут себя по-разному.Обратите внимание,кнопка здесь не имеет заданных ширины и высоты.Ширина и высота все поддерживаются размер шрифта, а затем установитеpaddingдля создания внутреннего интервала,line-height:1Указывает, что высота строки совпадает с размером шрифта.

затем второе предложение@click="handleClick"Это ключевой момент, который указывает на то, что событие клика привязано к нативной кнопке, когда мы используем этот компонент, мы нажимаем изображение

Здесь вам нужно вручную написать@click, то смотримhandleClickкод

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

На самом деле это использует встроенную систему событий Vue, чтобы инициировать событие клика для родителя, а родитель<el-button>, потому что фактический щелчок приходится на нативную кнопку, но при использовании компонента — на<el-button>Событие щелчка должно быть отправлено родителю, родитель прослушивает событие щелчка, а вторым параметром является объект события. Если ты не напишешь этоhandleClickне будет вызывать никаких эффектов щелчка

третье предложение:disabled="buttonDisabled || loading"Указывает отключенное состояние кнопки управления. Обратите внимание, что disabled — это собственный атрибут. Когда это значение равно true, кнопка не может быть нажата, а стиль наведения мыши не представляет собой маленькую руку. Отключенное состояние определяется состоянием загрузки и пользовательское отключение или нет. , где пользовательское отключение будет преобразовано в вычисляемое свойство, как показано ниже, следующие элементы представляют содержимое, связанное с формой, которое здесь не будет подробно объяснено.

Отключенное состояние состоит из двух частей: во-первых, функция отключена, что реализуется собственным отключенным атрибутом, а во-вторых, отключен стиль, когда кнопка становится серой, аcursor:not-alowedОтобразите мышь как запретный знак для достижения

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

увидеть снова: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
      }
    ]"

Обратите внимание, что связанный класс представляет собой массив, который смешивается в виде объекта. Этот метод записи можно использовать для справки. Класс в объекте контролирует, будет ли кнопка отключена, загружается, обычная, закругленная, круговая и тогда эти 3 предложения

<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>

Эти 3 предложения<button></button>Контент посередине, первый тэг i представляет шаблон загрузки в состоянии загрузки.Видно, что этот шаблон представляет собой просто иконку шрифта, которая постоянно вращается (animation:rotating 2s linear infinite)

Второй тег i — это иконка кнопки, устанавливаемая пользователем, эта иконка скрыта в состоянии загрузки, а затем<span>этот ярлык тогда и только тогда, когда<el-button>Он существует только тогда, когда есть контент, и контент помещается в слот слота.использовать$slots.defaultЧтобы определить, есть ли подэлементы, вы можете узнать из

НазадinjectПредполагается, что это связано с формой. Я не буду вводить его здесь. Обратите внимание, что при нажатии кнопки стиль также будет меняться.:activeПсевдокласс для достижения, я всегда думал, что только тег имеет активный псевдокласс, можно также использовать исходную кнопку.

Давайте поговорим об управлении размером кнопки, что на самом деле очень просто.

Атрибут размера находится в этом предложении путем привязки классаbuttonSize ? 'el-button--' + buttonSize : ''Преобразуйте размер в имя класса, чтобы использовать разные классы размера для управления размером,buttonSizeвычисляемое свойство, полученное по размеру

Подводя итог, мы понимаем, что различные атрибуты компонента в конечном итоге будут преобразованы в соответствующий класс для управления стилем работы кнопки, которая просто объединяет строки в:

Анализ исходного кода ButtonGroup

ButtonGroup — это группа кнопок, которая объединяет несколько кнопок вместе, как показано ниже.

Его исходный код проще, то есть он инкапсулирует div, обратите вниманиеel-button-groupСодержаниеdisplay:inline-block, что означает, что эта оболочка на самом деле является встроенным блоком, а слот внутри содержит подкнопку

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

Основное внимание здесь уделяется тому, как достигается белый зазор между кнопками, а ответом является псевдокласс css.:last-childа также:first-childа также:not,:first-childселектор для выборауказанный селектор, который является первым дочерним элементом его родительского элемента, то есть, если несколько тегов p одного уровня расположены вместе, а их родительским элементом является div, то p:first-child выберет первый тег p.
scss-код ниже

@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($--color-white, 0.5);
        border-right-color: rgba($--color-white, 0.5);
      }
    }
  }

Очевидно, здесь задается правая граница первого элемента и левая граница последнего элемента.Для элементов, которые не являются ни первыми, ни последними, устанавливается двухсторонняя граница.Обратите внимание, что задается только цвет границы здесь Все кнопки имеют рамку по умолчанию, а цвет такой же, как цвет тела кнопки, поэтому только изменение цвета здесь может достичь цели.