从Element3中学习Vue3.0 - el-button

在阅读文章之前，我已经默认你已经掌握了Vue3.0的基本使用，文章中主要分析其中组件开发过程中的思路以及一些Api的讲解。希望这篇文章能帮助你更加的了解Element3和Vue3.0的使用和组件的开发能带来一些帮助。

Template

废话也就不多赘述了，首先在上面所说的Element3Git地址上拉取最新源码，之后在package文件夹中找到button文件夹下的Button.vue，这个组件就是介绍第一个组件<el-button/>。对于tempalte方面就不多赘述了大概内容如下：

<template>
  <button class="el-button"
            :class="classes"
            :type="nativeType"
            :disabled="buttonDisabled || loading">
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-else-if="icon"></i>
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>

上述结构中的loading就不用多说了这里也是蛮通俗的，这个地方优先展示的是loading，其次才是icon图标，在Button组件中还使用了$slots.default该值指向的是插入当前组件的默认slot，也就是常说的匿名slot。这里用了一个很巧妙的手法就是，如果匿名组件存在的下才会使用slot而不是直接吧slot挂载组件中。这就很Nice~

props

button动态绑定了calss、type、disabled这个地方稍后再说，先标记一下，首先看下组件的入参(即:props):

export default {
  props: {
    //  控制按钮大小
    size: {
        type: String,
        validator(val) {
            if (val === '') return true
            return ['medium', 'small', 'mini'].indexOf(val) !== -1
        }
    },
    //  控制按钮类型
    type: {
        type: String,
            validator(val) {
            return (
                ['primary', 'success', 'warning', 'danger', 'info', 'text']
                .indexOf(val) !== -1
            )
        }
    },
    //  原生类型
    nativeType: {
        type: String,
        default: 'button'
    },
    //  是否朴素按钮
    plain: Boolean,
    //  是否圆角按钮
    round: Boolean,
    //  是否圆形circle
    circle: Boolean,
    //  是否loading
    loading: Boolean,
    //  是否禁用
    disabled: Boolean,
    //  图标类名
    icon: String
  }
};

通过上面的源码中可以看出size和type参数使用了自定义校验器(validator)，如果没有仔细阅读过Vue文档的同学可能对validator会有些许的陌生，validator可以在方法可以更加精确的规范参数的值，如size中只能传入medium,small,mini。validator方法返回的是一个boolean值，当没有传入规定的值，则会抛出错误无效的道具。也就时说validator会根据如果返回的值为true则标识验证通过，返回错误即验证失败。

细心的小伙伴或许已经发现了，其中包含属性native-type原生属性也挂载了上去，但是这个值并没有使用validator进行值的校验，可能在Element3开发人员可能为了方便以后的拓展吧，如果原声中native-type添加其他的值依赖组件库的项目即可以直接使用，无需更改组件库部分，同时也不希望组件库去影响原生的某些属性。

笔者也看了一下文档在Element3中Button的文档中，提供autofocus属性，但是在组件中却没有接收这个这个属性，我们这个时候再次看下HTML部分，在tempalte就直接是button标签了，所以当我们在<el-button autofocus>的时候autofocus就已经被挂载上去了。

逻辑处理

介绍完参数部分之后接下来我们继续向下看一下setup，经过Vue3.0的改进setup已经承载了页面中大部分的逻辑，所以el-button也是自然。

import { useGlobalOptions } from '../../src/use/globalConfig';
import { toRefs, inject, computed } from 'vue'

export default {
    setup(props) {
        const { size, disabled } = toRefs(props)
        
        const buttonSize = useButtonSize(size)
        const buttonDisabled = useButtonDisabled(disabled)
        const classes = useClasses({
            props,
            size: buttonSize,
            disabled: buttonDisabled
        })
        return {
            buttonDisabled,
            classes
        }
    }
}

由于在setup中是没有this所以setup的第一个参数即是props传入的参数属性参数，但获取到的对象是一个普通对象无法完成双向绑定，通过toRefs转换成了绑定对象。

buttonSize

在setup对class进行了统一的处理，那么我们就看下这部分的内容，方法中首先处理的是buttonSize，具体代码如下。

const useButtonSize = (size) => {
    //  获取当前组件实例
    const globalConfig = useGlobalOptions()
    return computed(() => {
        const elFormItem = inject('elFormItem', {})
        return size?.value || elFormItem.elFormItemSize || globalConfig.size
    })
}

src/use/globalConfig

export function useGlobalOptions() {
    //  获取当前组件实例
    const instance = getCurrentInstance()
    if (!instance) {
        console.ware('useGlobalOptions must be call in setup function')
        return
    }
    return instance.appContext.config.globalProperties.$ELEMENT || {}
}

在useButtonSize方法中通过公用方法获取到当前组件的示例，如果当前组件的实例存在的话则通过全局属性，获取到当前组件的全局信息(组件全局信息实在初始化时手动配置的信息，名为$ELEMENT)，若没有会获取到全局信息，则默认返回一个空对象。之后通过inject接收父级elFormItem传递过来的数据，并传入一个空对象作为默认值。

完成上述操作之后，在useButtonSize方法中通过计算属性，获取到size属性值，其优先级为props > elFormItem > globalConfig，最后将计算结果返回出去。

useButtonDisabled

处理完上述之后就处理了一下按钮的是否可用样式useButtonDisabled，具体代码如下：

const useButtonDisabled = (disabled) => {
    return computed(() => {
        const elForm = inject('elForm', {});
        return disabled?.value || elForm.disabled;
    });
};

其实这里的处理逻辑和处理button的size是差不多的，这里对代码就不多赘述了，这里同样是返回了所获取到的值。这里接收的不再是elFormItem的值，而是elForm的值，通过这里可以得出，Element3在elForm传入button会使整个表单全部都禁用。

注：关于inject所接收的值，这里就不多赘述，分析其组件时会进行讲解

useClasses

获取到所有的参数之后，则是通过useClasses方法统一处理class名称：

const useClasses = ({ props, size, disabled }) => {
  return computed(() => {
    return [
      size.value ? `el-button--${size.value}` : '',
      props.type ? `el-button--${props.type}` : '',
      {
        'is-plain': props.plain,
        'is-round': props.round,
        'is-circle': props.circle,
        'is-loading': props.loading,
        'is-disabled': disabled.value
      }
    ]
  })
}

关于class动态渲染这里，使用了计算属性，而不是一一对应绑定的，这样做的好处是可以统一维护其class的样式，还有点可以说的就是，在渲染class的时候，使用的是数组嵌套对象的形式，可能笔者比较菜，还没有用过这种方式动态渲染class，通过代码可以明确的看出useClasses方法只是简单的通过计算数据对所有相关的class名称进行了统一的处理。针不戳~

总结

上述代码已经是整个el-button组件的全部，虽然是一个很简单的组件，但是却能在里面学到一些东西，比如Vue3.0的Provide/Inject，整体代码思路清晰代码结构简单，都是我们值得学习的地方。

哪有什么岁月静好，不过是有人替你负重前行。感谢为Element3默默付出的程序大佬们。

如果大家感兴趣的话就点击下方连接，Star一下吧。

Element3 Git地址
Element3 官方文档