Vue版拖动验证
Vue版拖动验证
前端小鑫同学
发布于 2022-12-25 11:07:39
发布于 2022-12-25 11:07:39
代码可运行
运行总次数：0
代码可运行
1. 基础演示
- 定义一个滑轨:
<div id="slideway"></div> - 给滑轨上色:
#slideway {
background-color: #7ac23c;
height: 34px;
width: 0px;
transition: width 0.2s ease; // 过渡的css属性/执行时间/转速曲线(慢-快-慢)
}
- 模拟拖动过程
<script>
let w = 0;
let interval = setInterval(() => {
const slideway = document.querySelector("#slideway");
slideway.style.width = `${w++}px`;
}, 50);
</script>- 动画演示
2. 增加滑块
- 定义一个滑块:
<div id="handler"></div> - 给滑块上色:
#handler {
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 32px;
border: 1px solid #ccc;
cursor: move;
transition: left 0.2s ease; // 过渡的css属性/执行时间/转速曲线(慢-快-慢)
background: #fff
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAALNJREFUWEft1sENgzAMBVBItuk+ZZIoZ66xMgndp+NEle+I2Ja/0oM5Qsh/fGQp+7b42hfnbwGIBv6/gdbamXO+Sinfu4khojffr7V+LBP12EDv/TXGuHjjlNJxhyAifs6Iw4KY/gI0Ygrgr0ciRAAkQgxAIVQABEIN8EaYAJ4IE8BzKtQAz3BuUgXwDlcBEOFiACpcBECGTwHo8CmAFyw9D1gOGNp3VGOo3VyyPgDRQDTwA8Qr1SGOkJt6AAAAAElFTkSuQmCC")
no-repeat center;
}
- 模拟拖动过程
<script>
let w = 0;
setInterval(() => {
const slideway = document.querySelector("#slideway");
slideway.style.width = `${w++}px`;
const handler = document.querySelector("#handler");
handler.style.left = `${w++}px`;
}, 50);
</script>
- 动画演示
3. 基于Vue做拖动验证
状态分解
初始状态
拖动中状态
拖动完成状态
页面准备
<div id="drag-verify">
<div id="slideway"></div>
<div class="slideway-text" onselectstart="return false;" unselectable="on">
{{ description }}
</div>
<div id="handler" class="handler handler-icon-init"></div>
</div>
<style scoped>
#drag-verify {
position: relative;
background-color: #e8e8e8;
width: 300px;
height: 34px;
line-height: 34px;
text-align: center;
}
#drag-verify .handler {
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 32px;
border: 1px solid #ccc;
cursor: pointer;
transition: all 0.2s ease;
}
.handler-icon-init {
background: #fff
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAALNJREFUWEft1sENgzAMBVBItuk+ZZIoZ66xMgndp+NEle+I2Ja/0oM5Qsh/fGQp+7b42hfnbwGIBv6/gdbamXO+Sinfu4khojffr7V+LBP12EDv/TXGuHjjlNJxhyAifs6Iw4KY/gI0Ygrgr0ciRAAkQgxAIVQABEIN8EaYAJ4IE8BzKtQAz3BuUgXwDlcBEOFiACpcBECGTwHo8CmAFyw9D1gOGNp3VGOo3VyyPgDRQDTwA8Qr1SGOkJt6AAAAAElFTkSuQmCC")
no-repeat center;
}
.handler-icon-pass {
background: #fff
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAnZJREFUWEfVl7Fr1HAUxz8vPWvBqeBiN930hpPL6eBU6FIFQcVWXOpSk02kjg7eLZ1cRFQudLC63Q2Cyw36D2ibDMJZxIJb6+YgUimYn9yZg1ySX5JLT0qz/vK+38/vvfd7+UU45EcO2Z+jB7DQYnL6DLNKmEFxSoSfStg1YKtZ5fOoGc2dAdtl3lfcFmERmEo0Eroo3pXg2XOT7TwwmQC2R8X3WRFhKY9g/x3FdzFYbVZ5mhWTCrC8waxh0AZOZglp1juOyZW0WC2A7XFOKboFjYfCHFPf7IkAgflH4MQ4ABDaTrXfO7EnEcBy6QDzBzL3aTDBTRTlQOehY7Ia1YwB2B5LSrF+UHPnAvV+JqEVQGz9mOJ8u8x+WDsJ4INSXCwM4NPomffiIwCIcKdZ5ZUWYNnFNGDzf5j3NAXeNE1uaAGsDeoYPCoEkLLzsF70RAyVwHJpAtYQQLyZ4nw5zYMhNePU2B2IRAHeAldDDnXHpBGtZRRQV/OkTPpQWzNx8wFk7SxrPYEgCyCxBIk7LGCeXQJdE0bN/rA4StpzN2HqMQxBDARTeyN57sZGcmwQWW7/UnE28SgWTXsgJmA3TZzUSWh5PEDxWDsLfBoyQSs0YvOOjR0UtfARDIZTPN5yeQ/MaZX/3XwGH5l8AAkl1ALYHnNK9SHG8wjd/WlqL0/zOyqovZBYHvdQPBkHgQhl3YU19UpmbbKA0CoMofjiH+PyWoVvOo3MS2kAcR+4NCKIs1di5XWFX2lxmQCD4Lsu1wVuIVxDcTxJVME2io4S1sPzfiwAA5F6l8mdvfiPSUnx9YXJpxGzdAR/zUbdYdb7uXsgS6jo+l8KUxAwNFONPgAAAABJRU5ErkJggg==")
no-repeat center;
}
#drag-verify #slideway {
background-color: #7ac23c;
height: 34px;
width: 0px;
transition: all 0.2s ease;
}
#drag-verify .slideway-text {
position: absolute;
top: 0px;
width: 300px;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
-o-user-select: none;
-ms-user-select: none;
}
.unselect {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.drag-verify-pass {
color: #fff;
}
</style>
支持操作
- 验证成功监听
- 状态还原监听
- 状态还原函数
this.dragVerify = new DragVerify(
() => {
this.$emit("onResult", { code: 200, message: "验证通过!" });
},
() => {
this.$emit("onResult", { code: 0, message: "未验证!" });
}
);
// 验证后可以还原重新开始
this.dragVerify.reset();
准备做事件绑定的Bus类:
class Bus {
constructor() {
this.callbacks = {};
}
on(name, fn) {
this.callbacks[name] = this.callbacks[name] || [];
this.callbacks[name].push(fn);
}
emit(name, args) {
if (this.callbacks[name]) {
this.callbacks[name].forEach((callback) => {
callback(args);
});
}
}
}
准备用于实际拖动验证的DragVerify类:
- 构造函数
- 获取dom元素为后续操作准备
- 实例化bus类来做事件通信
- 初始化触摸和鼠标事件
- 设置回调函数后将状态返回
constructor(complete, reset) {
this.template = document.querySelector("#drag-verify");
this.dragbg = document.querySelector("#slideway");
this.handler = document.querySelector("#handler");
this.bus = new Bus();
this.initEvents();
complete && this.bus.on("complete", complete);
reset && this.bus.on("reset", reset);
}
- down事件处理
down(e) {
this.diffX = 0;
this.cancelTransition();
let clientX = 0; // 按下点到最左侧的距离
if (e.type == "touchstart") {
clientX = e.changedTouches[0].clientX;
} else if (e.type == "mousedown") {
clientX = e.clientX;
}
this.diffX = clientX - this.handler.offsetLeft;
}
- move事件处理
move(e) {
// 移动到的点距离初始按下时点的距离
let clientX = 0;
if (e.type == "touchmove") {
clientX = e.changedTouches[0].clientX;
} else if (e.type == "mousemove") {
clientX = e.clientX;
}
let moveX = clientX - this.diffX;
if (moveX >= this.template.offsetWidth - this.handler.offsetWidth) {
moveX = this.template.offsetWidth - this.handler.offsetWidth;
} else if (moveX <= 0) {
moveX = 0;
}
// 实时更新移动的距离
this.updateDistance(moveX);
}
- up事件处理
up(e) {
let clientX = 0;
if (e.type == "touchend") {
clientX = e.changedTouches[0].clientX;
document.ontouchmove = null;
document.ontouchend = null;
} else if (e.type == "mouseup") {
clientX = e.clientX;
document.onmousemove = null;
document.onmouseup = null;
}
this.addTransition();
if (clientX >= this.template.offsetWidth) {
this.complete();
} else {
this.reset();
}
}
- 验证成功
complete() {
this.template.className = "drag-verify-pass";
this.handler.classList.add("handler-icon-pass");
this.handler.onmousedown = null;
this.handler.ontouchstart = null;
this.bus.emit("complete");
}
- 恢复初始状态
reset() {
this.template.className = "unselect";
this.handler.classList.remove("handler-icon-pass");
this.updateDistance(0);
this.initEvents();
this.bus.emit("reset");
}
- 其他函数
// 更新移动距离
updateDistance(x = 0) {
this.updateStyle([this.handler], "left", x + "px");
this.updateStyle([this.dragbg], "width", x + "px");
}
// 添加动画
addTransition() {
this.template.className = "";
this.updateStyle([this.handler, this.dragbg], "transition", "all .2s ease");
}
// 取消动画
cancelTransition() {
this.updateStyle([this.handler, this.dragbg], "transition", "none");
}
// 更新样式
updateStyle(selector, attr, content) {
selector.forEach((item) => {
item.style[attr] = content;
});
}
动画演示
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-07-31，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
