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.
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效果岂不是非常的方便。
定义组件参数
这边就定义几个大家会常用到的参数：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 'ant-design-vue'
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 './LoadingButton.vue'
export default {
data() {
return {
loading: false
}
},
components: {
LoadingButton
},
methods: {
asyncFunc() {
return new Promise(resolve => {
setTimeout(() => {
resolve()
}, 2000)
})
}
}
}
</script>我们写了一个异步函数asyncFunc用来模拟实际业务中的异步请求，现在可以看下效果：
符合之前的预期效果，这样我们再有类似需要loading的场景时，就可以直接使用LoadingButton组件，将点击需要执行的异步函数传入即可，不需要再去定义loading
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🎜🎜LoadingButton implementieren🎜🎜🎜🎜Komponentenparameter definieren🎜🎜🎜Hier sind einige häufig verwendete Parameter:< code>text (button text),Dialogfeld „Modal“: Wenn unseronOkeineasynchrone Funktionist, fügt die OK-Schaltfläche vonModalautomatischloading< hinzu /code>-Effekt: Schließen Sie das Popup-Fenster, nachdem die Funktionsausführung abgeschlossen ist, wie folgt: 🎜</blockquote>🎜<img src="https://img.php.cn/upload/image/830/468/ 888 /1653308365937765.gif" title="1653308365937765.gif" alt="Vue-Komponentenpraxis: Entwickeln Sie eine Ladeschaltflächenkomponente – LoadingButton"/>🎜🎜Zu diesem Zeitpunkt lautet der Code wie folgt: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><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></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><blockquote>🎜Nachdem ich diesen Effekt gesehen hatte, dachte ich, wenn ich Könnte eine < code>Button-Komponente kapseln und die auszuführende Funktion übergeben, wäre es nicht sehr praktisch, denloading-Effekt automatisch entsprechend der Funktion zur Komponente hinzuzufügen? Ausführungsstatus. 🎜
type (Schaltflächentyp), asyncFunc (asynchrone Funktion, die ausgeführt wird, wenn auf die Schaltfläche geklickt wird), delay (Ladeverzögerung)</code > Darüber hinaus benötigen wir auch eine <code>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 🎜🎜< span style="font-size: 18px;">Asynchrone Funktion beurteilen<span style="font-size: 18px;">asyncFunc</span>🎜🎜< blockquote>🎜 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 < ansehen code>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< /code> 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 '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()
// 如果是异步函数，则显示loading
if (ret && ret.then) {
this.loading = {
delay: this.delay
}
ret.finally(() => {
this.loading = false
})
}
}
}
}
</script>原文地址：https://juejin.cn/post/7099234795720278046
作者：liangyue
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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
