vuejs에서 중복 요청을 방지하는 방법

Vuejs 메소드를 사용하여 반복 요청을 방지합니다. 1. 사용자 정의 파일 "preventReClick.js"를 추가합니다. 2. main.js에서 PreventReClick을 참조합니다. 3. 버튼에 "v-preventReClick"을 추가합니다.

이 기사의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터

vuejs에서 반복 요청을 방지하는 방법은 무엇입니까?

VUE는 다중 클릭 및 반복 요청을 방지합니다

1. 사용자 정의 파일을 추가합니다. PreventReClick.js

import Vue from 'vue'
const preventReClick = Vue.directive('preventReClick', {
    inserted: function (el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 3000)
            }
        })
    }
});
export { preventReClick }

2. main.js에서

import preventReClick from './store/preventReClick' //防多次点击，重复提交

를 참조하세요.

3. 버튼에 v-preventReClick을 추가하세요

<el-button class="common-button" size="small" type="primary" @click="handleSave(&#39;form&#39;)" v-preventReClick>保 存</el-button>

추천: "최신 5개 vue.js 비디오 튜토리얼 선택"

위 내용은 vuejs에서 중복 요청을 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!