vue自定义指令实现按钮只允许点击一次

vue自定义指令实现按钮只允许点击一次
这个例子中创建了一个名为 click-once 的自定义指令，通过 bind 钩子函数给元素绑定了一个点击事件，并且利用一个变量 clicked 控制了按钮只能点击一次的行为。在点击后会执行传入指令的方法，并在一定时间后（这里是 1 秒）重新允许点击。

记得将代码中的 handleClick 方法替换成你想要执行的实际操作。

// 在你的 Vue 文件中
<template>
  <div>
    <button v-click-once="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 执行你想要的操作
      // ...
    }
  }
};
</script>

// 新建一个名为 clickOnce 的自定义指令
Vue.directive('click-once', {
  bind(el, binding, vnode) {
    let clicked = false;
    el.addEventListener('click', () => {
      if (!clicked) {
        clicked = true;
        binding.value(); // 执行传入指令的方法
        setTimeout(() => {
          clicked = false;
        }, 1000); // 设置 1 秒后可再次点击
      }
    });
  }
});