一看就会的超实用小组件之LoadingButton

组件背景

在平时的工作中，经常会遇到一个场景：

点击按钮时请求一些接口数据，而为了避免用户重复的点击我们通常会为这些按钮添加loading。这个添加loading的功能本身时非常简单的，只要我们定义一个变量使用在Button组件中即可，但在做后台管理类项目时，这样的按钮可能会有非常非常多，可能一个组件中，很多变量都是xxx_loading，耗时耗力又不够优雅。
接下来，我们对Button组件做一个简单的封装来解决这个耗时耗力又不够优雅的loading问题

灵感来源

我们在使用Antd的Modal对话框时，当我们的onOk为异步函数时，此时Modal的确定按钮会自动添加loading效果，在函数执行完成后关闭弹窗，就像这样：

此时，代码如下：

asyncFunc() {
   
  return new Promise(resolve => {
   
    setTimeout(() => {
   
      resolve()
    }, 2000)
  })
},
handleTestModal() {
   
  const that = this
  this.$confirm({
   
    title: '测试异步函数',
    content: '异步函数延迟两秒结束',
    async onOk() {
   
      await that.asyncFunc()
    }
  })
},

看到这种效果后，就想到，如果可以封装一个Button组件，将需要执行的函数传入，组件中自动根据函数执行情况添加loading效果岂不是非常的方便。

实现LoadingButton

定义组件参数

这边就定义几个大家会常用到的参数：text(按钮文字)、type(按钮类型)、asyncFunc(按钮点击时执行的异步函数)、delay(loading延迟)，另外，还需要一个组件内部的loading变量来控制我们Button组件的状态，代码如下：

export default {
   
    data() {
   
        return {
   
          loading: false
        }
    },
    props: {
   
        text: {
   
          type: String,
          default: '确定'
        },
        type: {
   
          type: String,
          default: 'primary'
        },
        delay