Предотвратить повторную отправку проблем с данными с помощью внешней кнопки

Vue.js

1. Импортируйте проблему

Когда мы выполняем небольшую операцию на странице, она, вероятно, столкнется с поведением двойного щелчка. В это время кнопка отправки или сохранения не проверяется и, вероятно, сохранит две копии данных. Поэтому, как разработчик, надо сохранить подобное Нужно проверить кнопку.

2. Анализ проблемы

Мы устанавливаем disabled, управляя isDisable, чтобы контролировать кликабельность и неактивность кнопки. Значение по умолчанию isDisable: значение false, кнопку можно нажать. Когда мы нажимаем эту кнопку, сначала устанавливаем для привязки кнопки isDisable значение true, а через 1 секунду сразу же устанавливаем для него значение false. В этот момент пользователь больше не может нажимать и может управлять кнопкой только через одну секунду.

sendComment () {
this.disabled = true
if (this.text == ''){
this.$message({
type:'error',
message:'输入内容不能为空',
})
this.disabled = false
}else{
this.$post('/xx/xx/IdleGoodsComment',{
goods_id:this.$route.params.id,
content:this.text,
user_id:window.uId,
type:1
}).then((res) => {
if(res){
this.getDetail()
setTimeout(()=>{
this.disabled=false
this.getCommentList()
this.text = ''}
,1000)
}
})
}
}

Приведенный выше код предназначен для изменения свойства кнопки через таймер.После нажатия свойство кнопки отключается

Отключенное свойство кнопки привязки vue: disabled: 'имя переменной'.

3. Резюме

  1. Кнопка страницы должна обращать внимание на несколько кликов для повторной отправки данных.
  2. Здесь представлен случай vue.Если вы используете другие интерфейсные фреймворки, идеи аналогичны
Категории