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