Globally disables button secondary submission in VUE

August more text first play, here we go! 🍦

Recently, I encountered a problem in the background management system. For example, when the network status was not good, users could click the save button continuously, resulting in multiple data submission.

Scenario overview

Scenario: After a user clicks the save button, the back-end interface returns data after a long time. Our goal is to make the user unable to click the button during this period of time:

  • 1. After clicking the “Save” button, the loading layer will pop up, and the popup window will be closed after data processing is completed.
  • 2. After clicking the “Save” button, disable the button, change “Save” to “Save”, and add internal loading of the button (this kind of interactive experience is better).

Implementation method:

  • 1. Process each page request and data separately, which is simple, but tedious, and causes a lot of redundant code.
  • 2. Add instructions to the button to unify the global processing logic.

Development practices

In our VUE project, the specific implementation can be divided into three steps: AXIos interception processing, instruction file writing and introduction, and specific component binding.

Axios intercepts processing

When the user hits the save button, we want to hit it again after we get the response, so we’re going to do that in Axios. Set currentResState and currentResUrl to be processed in request interceptor and stored in session (better to store in VUEX as this data does not need persistent storage)

/ / request interceptor instance. Interceptors. Request. Use (config = > {/ / store the current request status sessionStorage. SetItem (' currentResState ', false) sessionStorage.setItem('currentResUrl', config.url) // ... return config }, error => { return Promise.reject(error) } )Copy the code

Fetch THE URL at the corresponding interceptor and change currentResState to true when determining that the request is the same

/ / response interceptor, the returned data preprocessing the instance. The interceptors. Response. Use (response = > {/ / judgement as url parameters, request return data is recorded in current currentResq, If (sessionStorage.getitem ('currentResUrl') === response.config.url) { sessionStorage.setItem('currentResState', true) } return response }, error => { return Promise.reject(error) } )Copy the code

Instruction files are written and introduced

Here, the custom instruction of vue is used to create btnForbidden.js and register in main.js

import Vue from 'vue' let forbidClick = null; Directive ('forbidClick', {bind: function (el) {let timer = null; forbidClick = () => { el.disabled = true; el.classList.add('is-disabled'); timer = setInterval(() => { if (sessionStorage.getItem('currentResState') == 'true') { clearInterval(timer); el.disabled = false; el.classList.remove('is-disabled'); }}, 500); }; el.addEventListener('click', forbidClick); }, unbind() { document.removeEventListener('click', forbidClick); }})Copy the code

main.js

Import '@/utils/clickForbidden'Copy the code

Instruction binding

Add the v-forbidclick directive to the button that you want to use. Since the save button in the project is usually wrapped in the global component, we just need to add the directive to the save button on the component to achieve global intercessor

<template> <div class="layout-main__buttons"> <el-button V-if ="!! save" id="layoutSaveButton" v-forbidClick :disabled="readonly" icon="el-icon-check" size="small" type="primary" @ click = "save" > save < / el - button > < / div > < / template >Copy the code

Write in the last

In this paper, the use of VUE instruction is used. If you do not know how to use it, you can go to vUE custom instruction to learn about it. The end of this article, I hope to help you 😉