Pratique des composants Vue : Développer un composant Button de chargement--LoadingButton

Cet article vous guidera étape par étape dans le développement d'un composant vueLoadingButton super pratique. J'espère qu'il sera utile à tout le monde.

Contexte du composant

Dans le travail quotidien, nous rencontrons souvent un scénario :

Demande de données d'interface en cliquant sur un bouton, et afin d'éviter les clics répétés des utilisateurs, nous fournissons généralement ces boutons avec Ajouter un chargement. La fonction d'ajout de loading est très simple tant que nous définissons une variable et l'utilisons dans le composant Button, mais lors de projets de gestion en arrière-plan, un tel bouton peut exister. Il peut y avoir de très nombreuses variables. Dans un composant, de nombreuses variables peuvent être xxx_loading, ce qui prend du temps, demande beaucoup de travail et n'est pas assez élégant. loading的功能本身时非常简单的，只要我们定义一个变量使用在Button组件中即可，但在做后台管理类项目时，这样的按钮可能会有非常非常多，可能一个组件中，很多变量都是xxx_loading，耗时耗力又不够优雅。

接下来，我们对Button组件做一个简单的封装来解决这个耗时耗力又不够优雅的loading问题。（学习视频分享：vue视频教程）

灵感来源

我们在使用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: {
          type: Number,
          default: 0
        },
        asyncFunc: {
          type: Function,
          default: () => {}
        }
    },
}

使用<span style="font-size: 18px;">antd</span>中的<span style="font-size: 18px;">Button</span>组件进行二次封装

在我们的自定义LoadingButton组件中，将上面定义的参数使用起来，并绑定一个click事件，代码如下：

<template>
  <Button :type="type" :loading="loading" @click="handleClick">
    {{ text }}
  </Button>
</template>

<script>
import { Button } from &#39;ant-design-vue&#39;

export default {
    components: {
        Button
    },
    methods: {
        handleClick() {}
    }
}
</script>

判断异步函数<span style="font-size: 18px;">asyncFunc</span>

这一部分为整个组件最重要的一个部分，即我们如何去判断传入的函数是异步函数，当我们传入的asyncFunc函数是异步函数时，组件才需要添加loading的动画，那么我们应该如何去判断一个函数是否为异步函数呢？

参考antd是如何实现的？

上面我们刚介绍了antd的Modal对话框中有类似的逻辑，那么不妨去阅读一下这部分相关的源码，看下antd的实现方式：

// components/modal/ActionButton.jsx

onClick() {
  const { actionFn, closeModal } = this;
  if (actionFn) {
    let ret;
    if (actionFn.length) {
      ret = actionFn(closeModal);
    } else {
      ret = actionFn();
      if (!ret) {
        closeModal();
      }
    }
    if (ret && ret.then) {
      this.setState({ loading: true });
      ret.then(
        (...args) => {
          // It's unnecessary to set loading=false, for the Modal will be unmounted after close.
          // this.setState({ loading: false });
          closeModal(...args);
        },
        e => {
          // Emit error when catch promise reject
          // eslint-disable-next-line no-console
          console.error(e);
          // See: https://github.com/ant-design/ant-design/issues/6183
          this.setState({ loading: false });
        },
      );
    }
  } else {
    closeModal();
  }
},

阅读antd源码的实现，我们知道，判断一个函数是否是异步函数，可以通过判断函数是否有.then(ret && ret.then)方法，那么我们也可以类似的做一个判断，代码如下：

async handleClick() {
  const asyncFunc = this.asyncFunc
  if (!this.isFunc) {
    return
  }
  const ret = asyncFunc()

  // 如果是异步函数，则显示loading
  if (ret && ret.then) {
    this.loading = {
      delay: this.delay
    }
    ret.finally(() => {
      this.loading = false
    })
  }
}

测试LoadingButton组件

到这里我们的最核心的组件逻辑就开发完成了，后面我们写一个demo来测试一下这个LoadingButton组件是否符合预期：demo代码如下：

<template>
  <div>
    <LoadingButton :delay="500" :asyncFunc="asyncFunc" />
  </div>
</template>

<script>
import LoadingButton from &#39;./LoadingButton.vue&#39;

export default {
  data() {
    return {
      loading: false
    }
  },
  components: {
    LoadingButton
  },
  methods: {
    asyncFunc() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve()
        }, 2000)
      })
    }
  }
}
</script>

我们写了一个异步函数asyncFunc用来模拟实际业务中的异步请求，现在可以看下效果：

符合之前的预期效果，这样我们再有类似需要loading的场景时，就可以直接使用LoadingButton组件，将点击需要执行的异步函数传入即可，不需要再去定义loading

Ensuite, nous effectuons une simple encapsulation du composant Button pour résoudre ce problème de chargement long, laborieux et inélégant. (Partage de vidéos d'apprentissage : vue vidéo tutoriel🎜)🎜🎜🎜Inspiration Source 🎜🎜

🎜Nous utilisons le de <a href="https://1x.antdv.com/components/modal-cn/" target="_blank" textvalue="Antd">Antd🎜 Boîte de dialogue Modal </a>, lorsque notre onOk est une fonction asynchrone, le bouton OK de Modal ajoutera automatiquement chargement, fermez la fenêtre contextuelle une fois l'exécution de la fonction terminée, comme ceci : 🎜

🎜🎜🎜À ce stade, le code est le suivant : 🎜

<template>
  <Button :type="type" :loading="loading" @click="handleClick">
    {{ text }}
  </Button>
</template>

<script>
import { Button } from &#39;ant-design-vue&#39;

export default {
  data() {
    return {
      loading: false
    }
  },
  props: {
    text: {
      type: String,
      default: &#39;确定&#39;
    },
    type: {
      type: String,
      default: &#39;primary&#39;
    },
    delay: {
      type: Number,
      default: 0
    },
    asyncFunc: {
      type: Function,
      default: () => {}
    }
  },
  components: {
    Button
  },
  computed: {
    isFunc() {
      return typeof this.asyncFunc === &#39;function&#39;
    }
  },
  methods: {
    async handleClick() {
      const asyncFunc = this.asyncFunc
      if (!this.isFunc) {
        return
      }
      const ret = asyncFunc()

      // 如果是异步函数，则显示loading
      if (ret && ret.then) {
        this.loading = {
          delay: this.delay
        }
        ret.finally(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>

🎜Après avoir vu cet effet, j'ai pensé, si je pourrait encapsuler un composant Button, transmettre la fonction qui doit être exécutée, ne serait-il pas très pratique d'ajouter automatiquement l'effet loading au composant en fonction de la fonction état d'exécution. 🎜

🎜🎜Implement LoadingButton🎜🎜🎜🎜Définir les paramètres du composant🎜🎜🎜Voici quelques paramètres couramment utilisés :texte (texte du bouton ), type (type de bouton), asyncFunc (fonction asynchrone exécutée lorsque le bouton est cliqué), delay (délai de chargement) , de plus, nous avons également besoin d'une variable loading à l'intérieur du composant pour contrôler l'état de notre composant Button. Le code est le suivant : 🎜rrreee🎜🎜Utiliser<span style="font-size : 18px;">antd</span>Le composant <span style="font-size: 18px;">Button</span> est réencapsulé 🎜🎜🎜Dans notre composant LoadingButton personnalisé, utilisez les paramètres définis ci-dessus et liez un événement click Le code est le suivant : 🎜rrreee 🎜🎜Fonction asynchrone de juge<span style="font-size: 18px;">asyncFunc</span>🎜🎜🎜Ceci part est la partie la plus importante de l'ensemble du composant, c'est-à-dire, comment déterminer que la fonction entrante est une fonction asynchrone ? Le composant ne doit être ajouté que lorsque la fonction asyncFunc que nous transmettons est une fonction asynchrone. fonction asynchrone. chargement de l'animation, alors comment juger si une fonction est une fonction asynchrone ? 🎜🎜🎜Référence : Comment antd est-il implémenté ? 🎜🎜🎜Nous venons d'introduire qu'il existe une logique similaire dans la boîte de dialogue Modal de antd, vous pourriez donc aussi bien lire le code source pertinent de cette partie et regarder antd Comment implémenter  : 🎜rrreee🎜 Lisez l'implémentation du code source de antd Nous savons que pour juger si une fonction est une fonction asynchrone, nous pouvons juger si la fonction a <. code>.then (ret && ret.then), alors nous pouvons également porter un jugement similaire. Le code est le suivant : 🎜rrreee🎜🎜Testez le LoadingButton<.> composant🎜🎜<blockquote>🎜to Ici, notre logique de composant de base a été développée plus tard, nous écrirons une démo pour tester si le composant <code>LoadingButton répond aux attentes : le code de la démo est le suivant : 🎜 rrreee🎜Nous avons écrit un La fonction asynchrone asyncFunc est utilisée pour simuler des requêtes asynchrones dans les affaires réelles. Vous pouvez maintenant voir l'effet : 🎜🎜🎜🎜 est conforme à l'effet attendu précédent, de sorte que lorsque nous aurons scénarios similaires qui nécessitent un loading, vous pouvez utiliser directement le composant LoadingButton et transmettre la fonction asynchrone qui doit être exécutée en cliquant. Il n'est pas nécessaire de définir le chargement</code.></.> variable. 🎜

写在最后

这个组件其实核心的代码非常少，也很容易读懂。由于最近在做一些业务这类场景比较多，感觉这个小组件还是挺实用的所以分享给大家，这里也是只对最重要的部分做了一个介绍，相信大家学会了之后也可以通过这个方式封装出符合自己实际场景需求的组件。最后，附上这个组件的完整代码：

<template>
  <Button :type="type" :loading="loading" @click="handleClick">
    {{ text }}
  </Button>
</template>

<script>
import { Button } from &#39;ant-design-vue&#39;

export default {
  data() {
    return {
      loading: false
    }
  },
  props: {
    text: {
      type: String,
      default: &#39;确定&#39;
    },
    type: {
      type: String,
      default: &#39;primary&#39;
    },
    delay: {
      type: Number,
      default: 0
    },
    asyncFunc: {
      type: Function,
      default: () => {}
    }
  },
  components: {
    Button
  },
  computed: {
    isFunc() {
      return typeof this.asyncFunc === &#39;function&#39;
    }
  },
  methods: {
    async handleClick() {
      const asyncFunc = this.asyncFunc
      if (!this.isFunc) {
        return
      }
      const ret = asyncFunc()

      // 如果是异步函数，则显示loading
      if (ret && ret.then) {
        this.loading = {
          delay: this.delay
        }
        ret.finally(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>

原文地址：https://juejin.cn/post/7099234795720278046

作者：liangyue

（学习视频分享：web前端开发、编程基础视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!