x: 0,
y: moveGroup.getAbsolutePosition().y,
};
} else if (pos.x > width - height) {
return {
x: width - height,
y: moveGroup.getAbsolutePosition().y,
};
} else {
return {
x: pos.x,
y: moveGroup.getAbsolutePosition().y,
};
}
} else {
return {
x: width - height,
y: moveGroup.getAbsolutePosition().y,
};
}
});
},
methods: {
// 鼠标进入滑块组
moveGroupMouseOver() {
document.body.style.cursor = 'pointer';
},
// 鼠标移出滑块组
moveGroupMouseOut() {
document.body.style.cursor = 'default';
},
// 鼠标按下
moveGroupMouseDown() {
_$mouseDown = true; // 只有在滑块组点击鼠标才被视作要点击滑动验证
},
// 鼠标抬起
moveGroupStop(e) {
if (!_$mouseDown) return;
_$mouseDown = false;
document.body.style.cursor = 'default'; // 鼠标恢复指针状态
if (this.success == 0) {
this.$refs.moveGroup.getNode().to({
x: 0,
duration: 0.3,
});
this.$refs.coverRect.getNode().to({
width: this.captchaConfig.height / 2,
duration: 0.3,
});
}
},
},
};
</script>
4. 最终效果
简单的滑块验证功能实现，可直接在vue页面中引入使用。konva库：https://konvajs.org/
到此这篇关于使用konva和vue-konva完成前端拖拽滑块验证功能的实现代码的文章就介绍到这了,更多相关konva和vue-konva拖拽滑块验证内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
