<template>
? <div>
? ? <div id="box">
? ? ? <div class="bgColor"></div>
? ? ? <div class="txt">滑動解鎖</div>
? ? ? <!--給i標簽添加上相應字體圖標的類名即可-->
? ? ? <div class="slider">
? ? ? ? <i v-show="!isSuccess" class="el-icon-d-arrow-right"></i>
? ? ? ? <i v-show="isSuccess" class="el-icon-check"></i>
? ? ? </div>
? ? </div>
? </div>
</template>

<script>
export default {
? mounted() {
? ? var self = this;
? ? //一、定義了一個獲取元素的方法
? ? function getEle(selector) {
? ? ? return document.querySelector(selector);
? ? }
? ? //二、獲取到需要用到的DOM元素
? ? var box = getEle("#box"), //容器
? ? ? bgColor = getEle(".bgColor"), //背景色
? ? ? txt = getEle(".txt"), //文本
? ? ? slider = getEle(".slider"), //滑塊
? ? ? icon = getEle(".slider>i"),
? ? ? successMoveDistance = box.offsetWidth - slider.offsetWidth, //解鎖需要滑動的距離
? ? ? downX; //用于存放鼠標按下時的位置
? ? //三、給滑塊添加鼠標按下事件
? ? slider.onmousedown = mousedownHandler;
? ? slider.ontouchstart = mousedownHandler; //移動端加touchstart事件
? ? //3.1鼠標按下事件的方法實現(xiàn)
? ? function mousedownHandler(e) {
? ? ? bgColor.style.transition = "";
? ? ? slider.style.transition = "";
? ? ? var e = e || window.event || e.which;
? ? ? downX = e.clientX ? e.clientX : e.changedTouches[0].clientX;
? ? ? if (!self.isSuccess) {
? ? ? ? //在鼠標按下時，分別給鼠標添加移動和松開事件
? ? ? ? document.onmousemove = mousemoveHandler;
? ? ? ? document.onmouseup = mouseupHandler;
? ? ? ? //添加移動端對應事件
? ? ? ? document.ontouchmove = mousemoveHandler;
? ? ? ? document.ontouchend = mouseupHandler;
? ? ? }
? ? }
? ? //四、定義一個獲取鼠標當前需要移動多少距離的方法
? ? function getOffsetX(offset, min, max) {
? ? ? if (offset < min) {
? ? ? ? offset = min;
? ? ? } else if (offset > max) {
? ? ? ? offset = max;
? ? ? }
? ? ? return offset;
? ? }
? ? //3.1.1鼠標移動事件的方法實現(xiàn)
? ? function mousemoveHandler(e) {
? ? ? var e = e || window.event || e.which;
? ? ? var moveX = e.clientX ? e.clientX : e.changedTouches[0].clientX;
? ? ? console.log(moveX);
? ? ? var offsetX = getOffsetX(moveX - downX, 0, successMoveDistance);
? ? ? bgColor.style.width = offsetX + "px";
? ? ? slider.style.left = offsetX + "px";

? ? ? if (offsetX == successMoveDistance) {
? ? ? ? success();
? ? ? }
? ? ? //如果不設置滑塊滑動時會出現(xiàn)問題（目前還不知道為什么）
? ? ? e.preventDefault();
? ? }
? ? //3.1.2鼠標松開事件的方法實現(xiàn)
? ? function mouseupHandler(e) {
? ? ? if (!self.isSuccess) {
? ? ? ? bgColor.style.width = 0 + "px";
? ? ? ? slider.style.left = 0 + "px";
? ? ? ? bgColor.style.transition = "width 0.5s linear";
? ? ? ? slider.style.transition = "left 0.5s linear";
? ? ? }
? ? ? document.onmousemove = null;
? ? ? document.onmouseup = null;
? ? ? //移除移動端事件
? ? ? document.ontouchmove = null;
? ? ? document.ontouchend = null;
? ? }
? ? //五、定義一個滑塊解鎖成功的方法
? ? function success() {
? ? ? self.isSuccess = true;
? ? ? txt.innerHTML = "解鎖成功";
? ? ? bgColor.style.backgroundColor = "lightgreen";
? ? ? //滑動成功時，移除鼠標按下事件和鼠標移動事件
? ? ? slider.onmousedown = null;
? ? ? document.onmousemove = null;
? ? ? //移除移動端事件
? ? ? document.ontouchstart = null;
? ? ? document.ontouchmove = null;
? ? }
? },
? data() {
? ? return {
? ? ? isSuccess: false,
? ? };
? },
};
</script>
<style>
/* ?使用全局樣式樣式去掉 */
* { touch-action: pan-y; }?
</style>
<style>
#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%);
}
</style>