Vue实现点击后600ms内禁用所有按钮的技术问询

问题根源分析 #

你当前代码的几个核心问题导致按钮永久禁用：

• 按钮的disabled属性用了静态写法disabled="false"，HTML中只要存在disabled属性（不管值是什么）都会禁用按钮，必须通过Vue的响应式变量绑定控制。
• delay方法的逻辑完全颠倒：你现在是600ms后才把disabled设为true，且没有后续恢复可用的逻辑，初始状态控制也缺失。
• 组件未初始化响应式变量disabled，导致状态无法正确更新。

正确实现方案 #

1. 模板部分（修正按钮的disabled绑定）

<ul>
  <li v-for="item in navigation" :key="item.path" :title="item.name">
    <button type="button" :disabled="isBtnDisabled" @click="delay(item.path)">{{ item.name }}</button>
  </li>
</ul>

2. 组件数据与方法实现

<script>
export default {
  data() {
    return {
      isBtnDisabled: false, // 初始化按钮禁用状态
      navigation: [
        // 示例导航数据，替换为你的实际数据
        { name: "首页", path: "/" },
        { name: "关于", path: "/about" }
      ]
    };
  },
  methods: {
    delay(to) {
      // 1. 立刻禁用所有按钮
      this.isBtnDisabled = true;
      // 2. 立刻执行路由跳转，不受延迟影响
      this.$router.push(to);
      // 3. 600ms后恢复按钮可用状态
      setTimeout(() => {
        this.isBtnDisabled = false;
      }, 600);
    }
  }
};
</script>

关键细节说明 #

• 用isBtnDisabled响应式变量统一控制所有按钮的禁用状态，避免逐个操作DOM。
• 路由跳转this.$router.push(to)在禁用后立刻执行，完全不受600ms延迟影响，符合需求。
• 通过setTimeout在600ms后将禁用状态重置为false，确保按钮自动恢复可用。

内容的提问来源于stack exchange，提问作者TheCzechTayen