vue实现滑动解锁功能 vue实现滑动解锁功能

本文实例为大家分享了vue实现滑动解锁功能的具体代码，供大家参考，具体内容如下

文章图片

文章图片

文章图片

话不多说，直接上代码；

/*使用全局样式样式去掉 */* { touch-action: pan-y; } #box {position: relative; width: 300px; height: 40px; margin: 0 auto; margin-top: 10px; background-color: #e8e8e8; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }.bgColor {position: absolute; left: 0; top: 0; width: 40px; height: 40px; background-color: lightblue; }.txt {position: absolute; width: 100%; height: 40px; line-height: 40px; font-size: 14px; color: #000; text-align: center; }.slider {position: absolute; left: 0; top: 0; width: 50px; height: 40px; /* border: 1px solid #ccc; */background: #fff; text-align: center; cursor: move; }.slider > i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

【vue实现滑动解锁功能】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。