• Vue滑块验证


    1、前言

    ​ 本文基于vue-element-admin框架,登陆时加入滑块验证。

    2、新建组件

    ​ 在srccomponents新建SilderVerifyindex.vue文件

    <template>
      <div class="silder-range" :class="rangeStatus?'success':''">
        <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
        {{rangeStatus?successText:startText}}
      </div>
    </template>
    <script>
    export default {
      props: {
        //成功图标
        successIcon: {
          type: String,
          default: "el-icon-success"
        },
        //成功文字
        successText: {
          type: String,
          default: "验证成功"
        },
        //开始的图标
        startIcon: {
          type: String,
          default: "el-icon-d-arrow-right"
        },
        //开始的文字
        startText: {
          type: String,
          default: "拖动滑块到最右侧"
        }
      },
      name: "SilderVerify",
      data() {
        return {
            rangeStatus:'',
            
        };
      },
      methods: {
        rangeMove(e){
    			let ele = e.target;
    			let startX = e.clientX;
    			let eleWidth = ele.offsetWidth;
    			let parentWidth =  ele.parentElement.offsetWidth;
    			let MaxX = parentWidth - eleWidth;
    			if(this.rangeStatus){//不运行
    				return false;
    			}
    			document.onmousemove = (e) => {
    				let endX = e.clientX;
    				this.disX = endX - startX;
    				if(this.disX<=0){
    					this.disX = 0;
    				}
    				if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
    					this.disX = MaxX;
    				}
    				ele.style.transition = '.1s all';
    				ele.style.transform = 'translateX('+this.disX+'px)';
    				e.preventDefault();
    			}
    			document.onmouseup = ()=> {
    				if(this.disX !== MaxX){
    					ele.style.transition = '.5s all';
    					ele.style.transform = 'translateX(0)';
    
              this.$emit("failed", this.rangeStatus);
    					
    				}else{
    					this.rangeStatus = true;
    
              this.$emit("success", this.rangeStatus);
    					
    				}
    				document.onmousemove = null;
    				document.onmouseup = null;
    			}
    		}
      
      }
    };
    </script>
    <style scoped>
    .silder-range{
    	background-color: #e3e4e6;
    	position: relative;
    	transition: 1s all;
    	user-select: none;
    	color: #333;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	height: 45px; /*no*/
    }
    .silder-range i{
    	position: absolute;
    	left: 0;
    	 60px;/*no*/
    	height: 100%;
    	color: #919191;
    	background-color: #fff;
    	border: 1px solid #bbb;
    	cursor: pointer;
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    .silder-range.success{
    	background-color: #7AC23C;
    	color: #fff;
    }
    .silder-range.success i{
    	color: #7AC23C;
    }
    </style>
    
    

    3、使用

    ​ 在srcviewsloginindex.vue页面

    3.1、引入组件

    import SilderVerify from '@/components/SilderVerify'
    
      components:{
        SilderVerify
      }
    

    3.2、加表单验证

    	status: [{ validator: validatestatus, trigger: "change" }]
    
        const validatestatus = (rule, value, callback)=> {
          if (!value) {
            callback(new Error('请拖动滑块完成验证'))
          } else {
            callback()
          }
        }
    

    3.3、使用

    ​ 密码框下方使用组件,success为成功后回调,failed为失败后回调

          <el-form-item prop="status">  
            <silder-verify @success="handleSuccess" @failed="handleError"></silder-verify >
          </el-form-item>
    
        handleSuccess(){
          this.loginForm.status = true
          this.$refs.loginForm.validateField("status")
        }
    

    4、效果展示

    image-20210507152844993

    image-20210507152856684

    image-20210507152905868

    本文参考:vue 实现滑块验证码,组件间传值方面略作修改

    转载请注明出处,本文链接:

    https://www.cnblogs.com/gaozejie/p/14741385.html

  • 相关阅读:
    7、单向一对多的关联关系(1的一方有n的一方的集合属性,n的一方却没有1的一方的引用)
    6、JPA_映射单向多对一的关联关系(n的一方有1的引用,1的一方没有n的集合属性)
    解决ubuntu的screen已经处于Attached状态,无法再打开窗口
    关于.ssh出错,无法从远程git仓库拉代码
    给程序添加git commit信息
    ubuntu服务器常用命令
    uint128_t 添加 c++ 重载类型强制转换
    Visual Studio 查看宏展开
    EOS dice移到1.8版本的修改汇总
    ubuntu 添加字体
  • 原文地址:https://www.cnblogs.com/gaozejie/p/14741385.html
Copyright © 2020-2023  润新知