Element에서 배운 Vue.js의component 제작 방법 2 (button)

button

전제 조건

Elemnt 2.52
공식 페이지
https://element.eleme.io/#/en-US

누름단추

준비된 기능

3가지 치수 지정

지정된 유형으로 디자인 주제 지정

버튼의 형태(평면, 각원형, 원형)

로드 동작

비활성

아이콘 활용

자동 초점 맞추기

로컬 형식 (button/submit/reset)

프로비저닝

  <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
      }
    ]"
  >

disable은 button Disabled 및 loadng 중 하나입니다.
buttonDisabled는 다음과 같은 컴퓨터로 정의됩니다.
부모가 건네준 프로젝트이기 때문에 inject는elForm을 하면서 형식적인 말과 형식을 연동한다.

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

다른 사람들은 프로프의 값을 솔직하게 받아들인다.

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

loading이 사실인 경우 loading icon이 표시됩니다.
icon이 지정되어 있으며 loading에 없으면 icon이 표시됩니다.
slot을 지정할 수 있습니다.

기타 컴퓨터

computed: {
  _elFormItemSize() {
    return (this.elFormItem || {}).elFormItemSize;
  },
  buttonSize() {
    return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
  },

buttonSize가 프로예요?elFormItemSize의 반환값 inject는 elForm 또는 elFormItems의 크기를 만들고 있습니다
그리고,this.$ELMENT가 뭐야?글로벌 규정이 있나요?※조사할 것

감상

두 번째지만 처음과 비교해 크게 성장하지 못했다.
다음에는 꼭 힘내세요.