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