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如何实现验证码输入交互
Dec 07 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vuex的使用步骤
Jan 06 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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结束标签的使用细节探讨及联想
2013/03/04 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python守护进程(daemon)代码实例
2015/03/06 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python 多线程重启方法
2019/02/18 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
简历里的自我评价范文
2014/02/24 职场文书
开学寄语大全
2014/04/08 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
财政局个人总结
2015/03/04 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
初中语文教学研修日志
2015/11/13 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
css3带你实现3D转换效果
2022/02/24 HTML / CSS
设置IIS Express并发数
2022/07/07 Servers