この記事では、非常に実用的な vueLoadingButton コンポーネント -- LoadingButton の開発を段階的に説明します。皆様のお役に立てれば幸いです。
loadingを追加する機能自体は非常に単純で、変数を定義して
Buttonコンポーネント内で使用するだけですが、バックグラウンド管理プロジェクトを行う場合には、このようなボタンが存在する可能性があります。 1 つのコンポーネント内の非常に多くの変数が
xxx_loading になる可能性がありますが、これは時間と労力がかかり、十分に洗練されていません。
Button コンポーネントの単純なカプセル化を作成して、この時間と労働集約的で洗練されていない
loading 問題を解決します。 (学習ビデオ共有:
vue ビデオ チュートリアル )
使用しているのはこのときのコードは次のとおりです。AntdModal
ダイアログ ボックス、
onOkが
非同期関数の場合、
Modalの [OK] ボタンは自動的に
loadingEffect を追加します。関数の実行が完了したら、次のようにポップアップ ウィンドウを閉じます。
asyncFunc() { return new Promise(resolve => { setTimeout(() => { resolve() }, 2000) }) }, handleTestModal() { const that = this this.$confirm({ title: '测试异步函数', content: '异步函数延迟两秒结束', async onOk() { await that.asyncFunc() } }) },
この効果を見た後、Button
コンポーネントをカプセル化して、実行する必要がある関数を渡すことができれば、コンポーネントは次のように
loadingを自動的に追加するだろうと考えました。関数の実行ですが、どのような影響がありますか? あまり便利ではありません。
コンポーネント パラメータの定義<span style="font-size: 18px;"></span>
ここでいくつか定義するだけです使用パラメータ:text (ボタンのテキスト) ,
type (ボタンの種類) ,
asyncFunc (ボタンがクリックされたときに実行される非同期関数) ,
lay(読み込み遅延)、さらに、
Button コンポーネントの状態を制御するには、コンポーネント内の
loading 変数が必要です。コードは次のとおりです:
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;"></span>antd<span style="font-size: 18px;"></span>
で <span style="font-size: 18px;"></span>Button<span style="font-size: 18px;"></span>
コンポーネントを使用します2 番目のステップのサブカプセル化を実行するには、<span style="font-size: 18px;"></span>#カスタム
コンポーネントで、上で定義したパラメータを使用し、click
イベントをバインドします。コードは次のとおりです: <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 {
components: {
Button
},
methods: {
handleClick() {}
}
}
</script></pre><div class="contentsignin">ログイン後にコピー</div></div>
Judge 非同期関数<span style="font-size: 18px;"></span>asyncFunc<span style="font-size: 18px;"></span>
asyncFunc参考関数が非同期関数である場合、コンポーネントは読み込みアニメーションを追加する必要があります。関数が非同期関数かどうかを判断するにはどうすればよいですか?
antdどのように実装されますか? 上で
の Modal
ダイアログ ボックスを紹介しました。このダイアログ ボックスにも同様のロジックがあるため、関連するドキュメントのこの部分を読むことをお勧めします。 antd
の実装方法: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 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&#39;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();
}
},</pre><div class="contentsignin">ログイン後にコピー</div></div>
のソースコードの実装を読むと、関数が非同期かどうかを判断できることがわかります。この関数を使用すると、その関数が .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 }) } }
TestLoadingButtonComponentこの時点で、コア コンポーネント ロジックは開発されました。後で、これが
コンポーネントは期待どおりです: デモ コードは次のとおりです:を作成しました。効果を参照してください:asyncFunc
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><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></pre><div class="contentsignin">ログイン後にコピー</div></div>
実際のビジネスでの非同期リクエストをシミュレートするために、非同期関数
は以前に予想された効果と一致しているため、loading
を必要とする同様のシナリオがある場合は、LoadingButton コンポーネントを使用して、実行する必要がある非同期関数をクリックします。これを渡すだけで、
loading 変数を定義する必要はありません。
这个组件其实核心的代码非常少,也很容易读懂。由于最近在做一些业务这类场景比较多,感觉这个小组件还是挺实用的所以分享给大家,这里也是只对最重要的部分做了一个介绍,相信大家学会了之后也可以通过这个方式封装出符合自己实际场景需求的组件。最后,附上这个组件的完整代码:
<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
以上がVue コンポーネントの実践: 読み込みボタン コンポーネントの開発 -- LoadingButtonの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。