vue实现滑动解锁功能


Posted in Vue.js onMarch 03, 2022

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

vue实现滑动解锁功能

vue实现滑动解锁功能

vue实现滑动解锁功能

话不多说,直接上代码;

<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鼠标按下事件的方法实现
    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鼠标移动事件的方法实现
    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();
      }
      //如果不设置滑块滑动时会出现问题(目前还不知道为什么)
      e.preventDefault();
    }
    //3.1.2鼠标松开事件的方法实现
    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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue实现广告栏上下滚动效果
Nov 26 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
Vue全局事件总线你了解吗
Feb 24 #Vue.js
Vue的生命周期一起来看看
Vue的过滤器你真了解吗
Feb 24 #Vue.js
Vue监视数据的原理详解
Feb 24 #Vue.js
Vue的列表之渲染,排序,过滤详解
Vue3如何理解ref toRef和toRefs的区别
Feb 18 #Vue.js
Vue h函数的使用详解
Feb 18 #Vue.js
You might like
PHP中显示格式化的用户输入
2006/10/09 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
js活用事件触发对象动作
2008/08/10 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
python next()和iter()函数原理解析
2020/02/07 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
浅谈Python 参数与变量
2020/06/20 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
Django多个app urls配置代码实例
2020/11/26 Python
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
汽车促销活动方案
2014/03/31 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers