Vue-Komponentenpraxis: Entwickeln Sie eine Ladeschaltflächenkomponente – LoadingButton

Dieser Artikel führt Sie Schritt für Schritt durch die Entwicklung einer superpraktischen vueLoadingButton-Komponente. Ich hoffe, dass er für alle hilfreich sein wird.

Komponentenhintergrund

Bei der täglichen Arbeit stoßen wir häufig auf ein Szenario:

Beim Klicken auf eine Schaltfläche werden einige Schnittstellendaten angefordert. Um wiederholte Klicks durch Benutzer zu vermeiden, stellen wir normalerweise diese Schaltflächen bereit mit Laden hinzufügen. Die Funktion zum Hinzufügen von loading ist sehr einfach, solange wir eine Variable definieren und in der Button-Komponente verwenden, aber bei Hintergrundverwaltungsprojekten kann eine solche Schaltfläche vorhanden sein In einer Komponente können viele Variablen xxx_loading sein, was zeitaufwändig, arbeitsintensiv und nicht elegant genug ist. 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

Als nächstes erstellen wir eine einfache Kapselung der Button-Komponente, um dieses zeitaufwändige, arbeitsintensive und unelegante Ladeproblem zu lösen. (Teilen von Lernvideos: vue Video Tutorial🎜)🎜🎜🎜Inspiration Quelle 🎜🎜

🎜Wir verwenden Antd🎜s Dialogfeld „Modal “: Wenn unser onOk eine asynchrone Funktion ist, fügt die OK-Schaltfläche von Modal automatisch loading-Effekt: Schließen Sie das Popup-Fenster, nachdem die Funktionsausführung abgeschlossen ist, wie folgt: 🎜

🎜🎜🎜Zu diesem Zeitpunkt lautet der Code wie folgt: 🎜

<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>

🎜Nachdem ich diesen Effekt gesehen hatte, dachte ich, wenn ich Könnte eine Button-Komponente kapseln und die auszuführende Funktion übergeben, wäre es nicht sehr praktisch, den loading-Effekt automatisch entsprechend der Funktion zur Komponente hinzuzufügen? Ausführungsstatus. 🎜

🎜🎜LoadingButton implementieren🎜🎜🎜🎜Komponentenparameter definieren🎜🎜🎜Hier sind einige häufig verwendete Parameter:text (button text), type (Schaltflächentyp), asyncFunc (asynchrone Funktion, die ausgeführt wird, wenn auf die Schaltfläche geklickt wird), delay (Ladeverzögerung) Darüber hinaus benötigen wir auch eine loading-Variable innerhalb der Komponente, um den Status unserer Button-Komponente zu steuern. Der Code lautet wie folgt: 🎜rrreee🎜🎜Verwenden Sie<span style="font-size: 18px;">antd</span>Die <span style="font-size: 18px;">Button</span> Komponente wurde neu gekapselt 🎜🎜🎜Verwenden Sie in unserer benutzerdefinierten LoadingButton-Komponente die oben definierten Parameter und binden Sie ein click-Ereignis. Der Code lautet wie folgt: 🎜rrreee 🎜🎜Asynchrone Funktion beurteilen<span style="font-size: 18px;">asyncFunc</span>🎜🎜🎜 Dieser Teil ist der wichtigste Teil der gesamten Komponente. Das heißt, wie stellen wir fest, dass die eingehende Funktion eine asynchrone Funktion ist? Die Komponente muss nur hinzugefügt werden, wenn die von uns übergebene Funktion asyncFunc vorhanden ist Eine asynchrone Funktion lädt eine Animation. Wie sollen wir dann beurteilen, ob eine Funktion eine asynchrone Funktion ist? 🎜🎜🎜Referenz: Wie wird antd implementiert? 🎜🎜🎜Wir haben gerade eingeführt, dass es im Dialogfeld Modal von antd eine ähnliche Logik gibt. Sie können also genauso gut den relevanten Quellcode dieses Teils lesen und sich antd So implementieren Sie : 🎜rrreee🎜 Lesen Sie die Implementierung des antd-Quellcodes. Wir wissen, dass wir beurteilen können, ob eine Funktion eine asynchrone Funktion ist code>.then (ret && ret.then) Methode, dann können wir auch ein ähnliches Urteil fällen. Der Code lautet wie folgt: 🎜rrreee🎜🎜Testen Sie den LoadingButton Komponente🎜🎜<blockquote>🎜to Hier wurde unsere Kernkomponentenlogik entwickelt. Später werden wir eine Demo schreiben, um zu testen, ob die <code>LoadingButton-Komponente den Erwartungen entspricht: Der Democode lautet wie folgt: 🎜 rrreee🎜Wir haben eine asynchrone Funktion asyncFunc geschrieben, die zur Simulation asynchroner Anforderungen im tatsächlichen Geschäft verwendet wird: 🎜🎜🎜🎜 stimmt mit dem zuvor erwarteten Effekt überein, sodass wir ihn haben In ähnlichen Szenarien, die loading erfordern, können Sie die Komponente LoadingButton direkt verwenden und die asynchrone Funktion übergeben, die beim Klicken ausgeführt werden muss. Es ist nicht erforderlich, den loading 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前端开发、编程基础视频）

Das obige ist der detaillierte Inhalt vonVue-Komponentenpraxis: Entwickeln Sie eine Ladeschaltflächenkomponente – LoadingButton. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!