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>

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

(0)

相关推荐

  • vue滑动解锁组件使用方法详解

    本文实例为大家分享了vue滑动解锁组件的使用,供大家参考,具体内容如下 这是一个pc端的滑动解锁组件 效果图: 话不多说,直接上代码 html部分 <template>     <div class="dragVerify">         <div class="spout" ref="spout">             <div                 class="slidi

  • vue实现滑动解锁功能

    本文实例为大家分享了vue实现滑动解锁功能的具体代码,供大家参考,具体内容如下 话不多说,直接上代码: <template>   <div>     <div id="box">       <div class="bgColor"></div>       <div class="txt">滑动解锁</div>       <!--给i标签添加上相应字体图

  • 原生js实现简单滑动解锁功能 js实现滑动拼图解锁

    本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码,供大家参考,具体内容如下 简单实现滑动解锁,效果图是这样的 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initi

  • iOS实现手势滑动解锁功能简析

    题记 在平常的生活中,我们大概经常遇见手势滑动解锁---也就是九宫格啊,已经出现好久了,虽然随着Apple的指纹解锁的发展手势解锁虽然还有但是因为其不如指纹解锁方便也用的也少了,但是在大多数APP中这两种方式都是并存的,比如qq,微信,支付宝等等,最近项目里面也刚好有这个需求,趁着刚完成抽出时间来记录下来当时的一些思路,可能有的地方理解的不到位,还需多总结,闲言少叙了,看重点. 功能描述如图:大概说一下思路,这个功能用来做相当于密令,用于两端的匹配,教师端设置了路径生成密码,储存在本地,学生端用

  • 使用Vue 实现滑动验证码功能

    做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码. 我之前做过 Web 相关开发,尝试对接过 Lavavel 的极验验证,当时还开发了一个 Lavavel 包: https://github.com/Germey/LaravelGeetest ,在开发包的过程中了解到了验证码的两步校验规则. 实际上这类验证码的校验是分为两个步骤的: 1.第一步就是前端的

  • Vue实现滑动验证功能

    用Vue实现滑动验证码,鼠标点击滑动验证,验证成功之后会显示验证通过. 程序分析 1.鼠标的点击2.滑块的拖动3.未验证之前滑动条上显示的文字4.滑块箭头指向Vue函数5.判断是否拖动完毕6.拖动完毕时改变背景色并显示验证成功 效果图演示 原始状态 点击之后拖动 拖动完毕 有没有感觉很奇妙的呢??? 在欣赏代码之前准备工作要做好的!!!**特别注意:**相关架包的引入(三个架包) <script src="js/vue.js"></script> <scr

  • javascript实现滑动解锁功能

    实现效果: css样式代码略. html代码: 页面上导入了jquery.mobile .jquery 复制代码 代码如下: <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js&quo

  • Vue实现滑动拼图验证码功能

    缘由:之前看哔哩哔哩官网登录的时候有一个拼图验证码,很好奇怎么去实现.然后就想着自己弄一个.先给大家看我的最终效果.后面再一点点拆解代码. 为什么想着写这个功能呢,主要在于拼图验证码在前端这里会比较复杂并且深入.相比文字拼写,12306的图片验证码都没有拼图验证码对前端的要求来的复杂,和难. 我总结下知识点: 1.弹窗功能 2.弹窗基于元素定位 3.元素拖动 4.canvas绘图 5.基础逻辑 一.弹窗和弹窗组件 抱歉,这里我偷懒了直接用了elementUI的el-popover组件,所以小伙伴

  • vue 实现滑动块解锁示例详解

    目录 引言 下载需要用到的组件库 书写登录页面 template 结构: script 逻辑: style 样式: 登录页面效果展示: 写滑动解锁组件 template 模板: script 代码: style 样式: 将滑动组件运用到我们的 Login 组件中: 补充逻辑代码 最终效果: 引言 从0开始,写一个登录滑动解锁的功能. 首先,新创建一个 vue 项目. 或者在已有的项目写也可以. 将无用的代码删一下. 下载需要用到的组件库 1.下载 element-ui. yarn add ele

  • vue实现滑动超出指定距离回顶部功能

    本文实例为大家分享了vue实现滑动超出指定距离回顶部功能,供大家参考,具体内容如下 效果图展示: 1.当页面滑动时执行scrollToTop ()函数,判断滑动的距离是否超出指定距离,注意下面获取getElementsByClassName时,是你被滑动标签的class. mounted() { window.addEventListener('scroll', this.scrollToTop, true) } scrollToTop () { let This = this let dom

  • vue中选项卡点击切换且能滑动切换功能的实现代码

    具体代码如下所述: <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}<

随机推荐