【分析element-ui源码】button组件篇

【分析element-ui源码】button组件篇

button组件主要包含button和button-group组件

button组件源码当前组件的所在目录：

button-group

知识点：主要使用<el-button-group>标签来嵌套按钮，通过slot槽的方式来嵌入<el-button>按钮

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

button

知识点：

1. provider/inject：这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效 (vue官网解析地址：cn.vuejs.org/v2/api/#pro…)

2. $emit:触发当前实例上的事件。附加参数都会传给监听器回调(vue官网解析地址：cn.vuejs.org/v2/api/?#vm…)

   主要用途

   父组件可以使用 props 把数据传给子组件。

   子组件可以使用 $emit 触发父组件的自定义事件。

<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, //尺寸  medium / small / mini
    icon: {
      //图标类名
      type: String,
      default: "",
    },
    nativeType: {
      //原生 type 属性  button / submit / reset
      type: String,
      default: "button",
    },
    loading: Boolean, //是否加载中状态
    disabled: Boolean, //是否禁用状态
    plain: Boolean, //是否朴素按钮
    autofocus: Boolean, //是否默认聚焦
    round: Boolean, //是否圆角按钮
    circle: Boolean, //是否圆形按钮
  },

  computed: {
    _elFormItemSize() {  //取得用于控制该表单内组件的尺寸
      return (this.elFormItem || {}).elFormItemSize;
    },
    // this.$ELEMENT ? 它是接收初始化 ElementUI 时传入的尺寸参数的对象，包含两个属性：size 以及 zIndex，方便全局定义各种组件的尺寸。类比于样式中的 body 样式继承。
    buttonSize() {
      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
    },
    buttonDisabled() {
      //1.设置button的disabled  2.是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
      return this.disabled || (this.elForm || {}).disabled;
    },
  },
  methods: {
    handleClick(evt) {
      this.$emit("click", evt);
    },
  },
};
</script>