Customize instructions to implement buttons to prevent repeated submission of requests

After clicking the OK button in the pop-up window, new data will be added. If instead of clicking, you keep clicking, there will be a problem of adding two or more data with the same content.

Solution:

Create a custom directive:

Create a new js file such as debounce.js

const debounce = {
    install(Vue) {
        Vue.directive('debounce', {
            inserted: function (el, binding) {
                //防抖 事件延时1s触发
                // let timer
                // el.addEventListener('click', () => {
                //     if (timer) {
                //         clearTimeout(timer)
                //     }
                //     timer = setTimeout(() => {
                //         binding.value()
                //     }, 1000)
                // })

                //节流  事件触发后1s内不会再触发事件
                // let [fn, event = 'click', time = '1000'] = binding.value
                let timer, timeEnd
                el.addEventListener('click', () => {
                    if (timer) {
                        timeEnd = new Date().getTime()
                        if (timeEnd - timer > 1000) {
                            // fn(el.value)
                            binding.value();
                            timer = timeEnd
                        }
                    } else {
                        // fn(el.value)
                        binding.value();
                        timer = new Date().getTime()
                    }
                })
            },
        })

    }
}

export { debounce }

The content is as above, using a throttling method: that is, the event is triggered after one click. If you click continuously, it will only be executed for the first time and will not be executed repeatedly within 1 second.

If the anti-shake method is used, that is, the commented out part, its logic is to delay execution after clicking, and it has been verified that it cannot prevent repeated submission of requests.

Then for global use, you need to reference this file in main.js and mount it on vue. Pay attention to the path when referencing.

//节流
import { debounce } from './js/debounce'
Vue.use(debounce)

Next is the use in buttons

For ordinary buttons, just rewrite @click="method name" to v-debounce="method name".

  <a-button type="primary" v-debounce="addModelOk" :loading="conloading"
            >保存</a-button
          >

My project uses the antd component library. The modal component of this thing, which is the OK button in the pop-up window, cannot use this command.

So if you want to add this anti-repair function to the pop-up window’s OK button, you can only customize the modal’s footer. Don’t use the built-in one. It’s also very simple.

 <!-- 新增 & 修改 & 详情 -->
      <a-modal
        width="500px"
        v-model="addModel"
        okText="确认"
        cancelText="取消"
        :title="addModelTit"
        :maskClosable="false"
        :confirmLoading="conloading"
        closeable="true"
      >
        <div class="modal-item">
           这里写你的弹窗中的内容，表单啥的
        </div>
        <template slot="footer">
          <a-button @click="addModelCancel">取消</a-button>
          <a-button type="primary" v-debounce="addModelOk" :loading="conloading"
            >保存</a-button
          >
        </template>
      </a-modal>

This is how to prevent redundant submissions