本篇文章手把手帶大家開發(fā)一個超實用的vue加載Button組件–LoadingButton，希望對大家有所幫助。

組件背景

在平時的工作中，經(jīng)常會遇到一個場景：

點擊按鈕時請求一些接口數(shù)據(jù)，而為了避免用戶重復(fù)的點擊我們通常會為這些按鈕添加loading。這個添加loading的功能本身時非常簡單的，只要我們定義一個變量使用在Button組件中即可，但在做后臺管理類項目時，這樣的按鈕可能會有非常非常多，可能一個組件中，很多變量都是xxx_loading，耗時耗力又不夠優(yōu)雅。

接下來，我們對Button組件做一個簡單的封裝來解決這個耗時耗力又不夠優(yōu)雅的loading問題。（學(xué)習(xí)視頻分享：vue視頻教程）

靈感來源

我們在使用Antd的Modal對話框時，當我們的onOk為異步函數(shù)時，此時Modal的確定按鈕會自動添加loading效果，在函數(shù)執(zhí)行完成后關(guān)閉彈窗，就像這樣：

此時，代碼如下：

asyncFunc() {   return new Promise(resolve => {     setTimeout(() => {       resolve()     }, 2000)   }) }, handleTestModal() {   const that = this   this.$confirm({     title: '測試異步函數(shù)',     content: '異步函數(shù)延遲兩秒結(jié)束',     async onOk() {       await that.asyncFunc()     }   }) },

看到這種效果后，就想到，如果可以封裝一個Button組件，將需要執(zhí)行的函數(shù)傳入，組件中自動根據(jù)函數(shù)執(zhí)行情況添加loading效果豈不是非常的方便。

實現(xiàn)LoadingButton

定義組件參數(shù)

這邊就定義幾個大家會常用到的參數(shù)：text(按鈕文字)、type(按鈕類型)、asyncFunc(按鈕點擊時執(zhí)行的異步函數(shù))、delay(loading延遲)，另外，還需要一個組件內(nèi)部的loading變量來控制我們Button組件的狀態(tài)，代碼如下：

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: () => {}         }     }, }

使用antd中的Button組件進行二次封裝

在我們的自定義LoadingButton組件中，將上面定義的參數(shù)使用起來，并綁定一個click事件，代碼如下：

<template>   <Button :type="type" :loading="loading" @click="handleClick">     {{ text }}   </Button> </template>  <script> import { Button } from 'ant-design-vue'  export default {     components: {         Button     },     methods: {         handleClick() {}     } } </script>

判斷異步函數(shù)asyncFunc

這一部分為整個組件最重要的一個部分，即我們?nèi)绾稳ヅ袛鄠魅氲暮瘮?shù)是異步函數(shù)，當我們傳入的asyncFunc函數(shù)是異步函數(shù)時，組件才需要添加loading的動畫，那么我們應(yīng)該如何去判斷一個函數(shù)是否為異步函數(shù)呢？

參考antd是如何實現(xiàn)的？

上面我們剛介紹了antd的Modal對話框中有類似的邏輯，那么不妨去閱讀一下這部分相關(guān)的源碼，看下antd的實現(xiàn)方式：

// 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源碼的實現(xiàn)，我們知道，判斷一個函數(shù)是否是異步函數(shù)，可以通過判斷函數(shù)是否有.then(ret && ret.then)方法，那么我們也可以類似的做一個判斷，代碼如下：

async handleClick() {   const asyncFunc = this.asyncFunc   if (!this.isFunc) {     return   }   const ret = asyncFunc()    // 如果是異步函數(shù)，則顯示loading   if (ret && ret.then) {     this.loading = {       delay: this.delay     }     ret.finally(() => {       this.loading = false     })   } }

測試LoadingButton組件

到這里我們的最核心的組件邏輯就開發(fā)完成了，后面我們寫一個demo來測試一下這個LoadingButton組件是否符合預(yù)期：demo代碼如下：

<template>   <div>     <LoadingButton :delay="500" :asyncFunc="asyncFunc" />   </div> </template>  <script> import LoadingButton from './LoadingButton.vue'  export default {   data() {     return {       loading: false     }   },   components: {     LoadingButton   },   methods: {     asyncFunc() {       return new Promise(resolve => {         setTimeout(() => {           resolve()         }, 2000)       })     }   } } </script>

我們寫了一個異步函數(shù)asyncFunc用來模擬實際業(yè)務(wù)中的異步請求，現(xiàn)在可以看下效果：

符合之前的預(yù)期效果，這樣我們再有類似需要loading的場景時，就可以直接使用LoadingButton組件，將點擊需要執(zhí)行的異步函數(shù)傳入即可，不需要再去定義loading變量。

寫在最后

這個組件其實核心的代碼非常少，也很容易讀懂。由于最近在做一些業(yè)務(wù)這類場景比較多，感覺這個小組件還是挺實用的所以分享給大家，這里也是只對最重要的部分做了一個介紹，相信大家學(xué)會了之后也可以通過這個方式封裝出符合自己實際場景需求的組件。最后，附上這個組件的完整代碼：

<template>   <Button :type="type" :loading="loading" @click="handleClick">     {{ text }}   </Button> </template>  <script> import { Button } from 'ant-design-vue'  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: () => {}     }   },   components: {     Button   },   computed: {     isFunc() {       return typeof this.asyncFunc === 'function'     }   },   methods: {     async handleClick() {       const asyncFunc = this.asyncFunc       if (!this.isFunc) {         return       }       const ret = asyncFunc()        // 如果是異步函數(shù)，則顯示loading       if (ret && ret.then) {         this.loading = {           delay: this.delay         }         ret.finally(() => {           this.loading = false         })       }     }   } } </script>

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

作者：liangyue

（學(xué)習(xí)視頻分享：web前端開發(fā)、編程基礎(chǔ)視頻）