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 秒后可再次点击}});}
});