vue 组件设置禁用时间

可以通过在 Vue 组件中使用 `$refs` 来实现设置禁用时间。

首先，在组件中定义一个计时器变量 `disableTimer`，默认值为 `null`。然后，在需要禁用的元素上使用 `ref` 属性，如下所示：

<template>
  <div>
    <button ref="myButton" @click="handleClick" :disabled="disableTimer">Click me</button>
  </div>
</template>

在 `handleClick` 方法中，首先判断计时器变量是否为 `null`，如果是，则设置 `disableTimer` 为一个新的计时器，计时器时间为 5 秒，同时禁用按钮。计时器到期后，解除禁用。

<script>
export default {
  data() {
    return {
      disableTimer: null
    };
  },
  methods: {
    handleClick() {
      if (this.disableTimer === null) {
        this.disableTimer = setTimeout(() => {
          this.disableTimer = null;
        }, 5000);
        this.$refs.myButton.disabled = true;
      }
    }
  }
};
</script>

这样，当用户点击按钮时，按钮会被禁用 5 秒钟。需要注意的是，如果用户在按钮禁用期间再次点击按钮，则需要重置计时器。