Element-UI源码——button按钮

button

常用的操作按钮。

button.vue

<template>
  <!-- 通过判断buttonDisabled计算属性 和 loading决定是否禁用按钮 
  autofocus原生属性是否聚焦
  nativeType原生type属性
  class使用了数组混合对象的写法，通过传入的type判断按钮的类型如(el-button--primary)
  buttonSize设定按钮的大小如(el-button--mini)
  剩下的就是是否禁用 是否加载中 是否朴素按钮 是否圆角按钮 是否圆形按钮 -->
  <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
      }
    ]"
  >
  <!-- loading图标 -->
    <i class="el-icon-loading