複数クリックを防ぐVueの実践

通常、クリックイベントは、メッセージリマインダーのさまざまな状況に分割されます。これらが処理されない場合、数秒以内に多くのプロンプトメッセージがポップアップ表示され、非常に煩わしくなります。例:

このプロンプトメッセージが 1 回だけ表示されるように制御するにはどうすればよいですか?

次に、クリックイベントメソッドを先頭に追加します

クリックイベントで対応する操作を実行するかどうかを制御するための変数hasRemindを定義します。

ユーザーが初めてクリックしたときは、hasRemind = false です。このとき、2 番目の if 文に入り、hasRemind の値が true に変更されます。3 秒後、hasRemind の値は再び false に変更されます。この場合、ユーザーはクリックイベント内のすべてのプロセスを正常に入力できます。

ユーザーが2回目にクリックすると、hasRemind=trueとなり、クリックイベントはそのまま終了します。クリックメソッド内の一連の処理は、hasRemindの値がfalseの場合にのみ継続できます。

//デフォルトでは、ログインをトリガーできるクリックイベントには、Remind:false が設定されています。

// 連続した複数のクリックを防ぐ let vm = this;
this.hasRemind === true の場合、戻り値:
if (this.hasRemind === false) {
    this.hasRemind = true;
    setTimeout(関数(){
       vm.hasRemind = false;
    },3000)
}

(ここでは、上記のコードスニペットをログインクリックイベントに配置することで、ユーザーがこれを複数回クリックして複数のプロンプトメッセージが表示されるのを防止します。)

 // "個人ログインクリックイベント"
            レジスタボタン() {
                // 連続した複数のクリックを防ぐ let vm = this;
                this.hasRemind === true の場合、戻り値:
                if (this.hasRemind === false) {
                    this.hasRemind = true;
                    setTimeout(関数(){
                        vm.hasRemind = false;
                    },3000)
                }
                var qs = Qs;
                (this.logintype == 1)の場合{
                    //アカウントとパスワードのログイン if (this.username == "") {
                        this.$メッセージ({
                            メッセージ: 「口座番号を入力してください」
                            タイプ: '警告'
                        });
                        false を返します。
                    }
                    そうでない場合 (this.password == "") {
                        this.$メッセージ({
                            メッセージ: 'パスワードを入力してください'
                            タイプ: '警告'
                        });
                        false を返します。
                    } それ以外 {
                        request_POST('/login', qs.stringify({
                            アイデンティティ: this.username、
                            desStr: this.password、
                            ログインタイプ: 1,
                            ログインロール: 0
                        })).then((res) => {
                            （res.data.code == 200）の場合{
                                localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                //ログイン成功// window.open(this.apiHost + 'uesr/resume', '_parent')
                                window.open(this.apiHost + 'index/index', '_parent')
                            } そうでない場合 (res.data.code == 12462) {
                                this.$メッセージ({
                                    メッセージ: 「ユーザーは登録されていません」
                                    タイプ: '警告'
                                });
                                // 登録ページにジャンプ setTimeout(() => {
                                    window.open(this.apiHost + 'userregister/userregister',
                                        '_自己'）;
                                }, 1000)
                            } else if (res.data.code == 12468) { //ユーザーにはユーザー名とパスワードがありません localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/enterAccount', '_parent');
                            } else if (res.data.code == 604) { //ユーザーには履歴書がありません localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                ウィンドウを開きます(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1077) { // 履歴書はレビューに合格できませんでした localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                ウィンドウを開きます(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1075) { //進行中のレビューを再開 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/audit', '_parent');
                            } それ以外 {
                                this.$message.error(res.data.message);
                            }
                        })
                    }
                } それ以外 {
                    //認証コード loginif (this.phone == "") {
                        this.$メッセージ({
                            メッセージ: 「電話番号を入力してください」
                            タイプ: '警告'
                        });
                        false を返します。
                    } そうでない場合 (!(/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(
                            this.phone))) {
                        this.$メッセージ({
                            メッセージ:「有効な電話番号を入力してください」
                            タイプ: '警告'
                        });
                        false を返します。
                    } それ以外の場合 (this.code == "") {
                        this.$メッセージ({
                            メッセージ: 「確認コードを入力してください」
                            タイプ: '警告'
                        });
                        false を返します。
                    } それ以外 {
                        request_POST('/login', qs.stringify({
                            アイデンティティ: this.phone、
                            キャプチャ: this.code、
                            ログインタイプ: 2,
                            ログインロール: 0
                        })).then((res) => {
                            （res.data.code == 200）の場合{
                                localStorage.setItem("トークン", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/resume', '_parent');
                            } そうでない場合 (res.data.code == 12462) {
                                this.$メッセージ({
                                    メッセージ: 「ユーザーは登録されていません」
                                    タイプ: '警告'
                                });
                                // 登録ページにジャンプ setTimeout(() => {
                                    window.open(this.apiHost + 'userregister/userregister',
                                        '_自己'）;
                                }, 1000)
                            } else if (res.data.code == 12468) { //ユーザーにはユーザー名とパスワードがありません localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/enterAccount', '_parent');
                            } else if (res.data.code == 604) { //ユーザーには履歴書がありません localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                ウィンドウを開きます(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1077) { // 履歴書はレビューに合格できませんでした localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                ウィンドウを開きます(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1075) { //進行中のレビューを再開 localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/audit', '_parent');
                            } それ以外 {
                                this.$message.error(res.data.message);
                            }
                        })
                    }
                }
            },

Vue での複数クリックを防止する実践に関するこの記事はこれで終わりです。Vue での複数クリックを防止するためのより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: