vue 项目中实现滑块儿验证 注册

#首先安装

npm install --save vue-monoplasty-slide-verify

然后再main.js里面引入
// main.js

import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';

Vue.use(SlideVerify);

//rigister页面里（我是在Home页面用的 ，看需要）

<template>

  <div class="home">
    <HelloWorld msg=""/>
<img src="../assets/beijing2.png" class="img" alt="">
<div>
  <van-form validate-first @onSubmit="onSubmit">
            <!-- 手机号--> 
            <van-field
                    v-model="phone"
                    name="pattern"
                    label="手机号"
                    @blur="setphone"
                    required
                    placeholder="手机号"
                    :rules="[{ pattern : /1\d{10}/, message: '请输入正确内容' }]"
            />
            <hr>
<!--        短信验证码    -->
            <van-field
                    v-model="smsCode"
                    center
                    clearable
                    label="短信验证码"
                    required
                    placeholder="请输入验证码"
            >
                <template #button>
                    <div class="codebtn">

                    <van-button color="#ff9000" size="small" round  class="out1" @click="toshowverify" :disabled="flag" >{{msg}}</van-button>
                    </div>
                </template>
            </van-field>
       <!-- 滑块验证 -->
     
<van-overlay :show="show"  class="overlay">
       <slider v-if="show " @onSuccess="code" />
</van-overlay>

            <hr>
<!--            密码-->
            <van-field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    required
                    placeholder="请填写不少于8位的密码(数字+字母)"
                    :rules="[{ pattern:/\w{8,16}/, message: '请填写不少于8位的密码(数字+字母)' }]"
            />
            <hr>
<!--            确认密码-->
            <van-field
                    v-model="repassword"
                    type="password"
                    name="密码"
                    label="确认密码"
                    required
                    placeholder="请再次输入您的密码"
                    :rules="[{pattern:/\w{8,16}/, message: '请再次确认密码' }]"
            />
            <hr>
            <!-- 邀请码 -->
                 <van-field
                 
                    v-model="inviteCode"
                    name="inviteCode"
                    label="邀请码"
                    placeholder="邀请码(选填)"
                    :rules="[{  message: '请输入邀请码' }]"
            />
            <hr>
        </van-form>
        <van-button color="#ff9000" @click="regidter" style="width: 90%;margin: 16px 18px 0 16px;border-radius: 20px">立即注册</van-button>
        <router-link to="/login">
            <p style="text-align: left;margin-left: 25px; font-size:13px; color: #cdc9c9">*注册即赠送价值10LKB的初级任务</p>
        </router-link>
           <van-checkbox v-model="checked" shape="square" required checked-color="#ff9000" class="check" style="font-size:13px">注册即同意《<router-link to="/rules"><span style="color:#00009c">驿站来客服务协议</span> </router-link> 》</van-checkbox>
        <router-link to="/download"  ><p style="text-align:left; margin-left:30px;color:#00009c">APP下载链接</p> </router-link>
</div>







  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import slider from "../components/slider.vue"
 import {getCode} from "../utils/api";
 import {registry} from "../utils/api";

    export default {
      name: "Registered",
      components: {
        HelloWorld,  slider
      },
       data(){
            return{
                //验证码
                msg:"获取验证码",
                
                timer:null,
                num:59,
                show: false,
                flag:false,
                //表单
                account:"",
                password:"",
                repassword:"",
                inviteCode:{},
                checked:"",
                phone:"",
                smsCode:"",
            }
        },
      
      created(){

console.log(this.$route.query.inviteCode);
this.inviteCode=this.$route.query.inviteCode
        //   this.phone= localStorage.getItem("setphon")
      },
       
        methods:{
            // 失去焦点时本地存储手机号
            setphone(){
                    // localStorage.setItem("setphon",this.phone)
            },
            onSubmit(values) {
                console.log('submit', values);
            },
           
            
            regidter(){
                registry(this.phone,this.smsCode,this.password,this.repassword,this.inviteCode).then(res=>{
                    console.log(res)
                    if(res.code===200){
                        this.$notify({type:"success",message:"恭喜小主，注册成功！"})
                        setTimeout(()=>{
                            this.$router.push("/download")
                        },1000)
                    }else{
                        this.$notify({type:"danger",message:res.msg})
                    }
                })
            },
            toshowverify(){
                // 点击按钮弹框
                   let reg = /^1[3|4|5|7|8][0-9]{9}$/;
                   if (this.phone!="" &&  reg.test(this.phone)) {
                       this.show=true
                       
                   }

            },
            code(){
                this.show=false
                   // 点击按钮弹框
                   let reg = /^1[3|4|5|7|8][0-9]{9}$/;
                   if (this.phone!="" &&  reg.test(this.phone)) {
                       this.show=false
                       
                        getCode(this.phone).then(res=>{
                    console.log(res)
                    if(res.code !=200){
                        this.$notify({type:"danger",message:res.msg})
                        }else{
                        this.$notify({type:"success",message:"短信已发送"})
                          //    验证码倒计时
                this.timer = setInterval(() => {
                    this.msg=this.num
                    this.flag= true
                    this.num--
                    if (this.num === -1) {
                        clearInterval(this.timer)
                        this.msg = '重新获取'
                        this.flag = false
                        this.num = 60

                    }
                }, 1000)
                    }
                })
                  
                   }
               
            }
        }
    }
</script>
<style lang="less">
.home{
    margin-left: -30px;
    margin-top: -40px;
    margin-right: 0;
    width: 120%;
}
.check{
    margin-left: 30px;
    margin-top: 20px;
}

   /deep/.van-button--small{
        background-color: #6D72E7;
    }
    /deep/.van-cell{
        font-size: 1.2em;
        padding: 16px;
    }
    /deep/.van-button--normal{
        font-size: 1.2em;
        background-color: #6D72E7;
    }
    .registered{
        margin: 40px 0;
    }
.img{
    width: 100%;
    height: 150px;
}
.codebtn{
    
    
    outline: none;
   
    padding: 1px;
    box-sizing: border-box;
}
.out1{
     border-radius: 10px;
     width: 78px;
  outline: #ff9000;
    border: 1px solid #ff9000;
    background-color: none;
}
// 遮罩层
.overlay{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

##//slider小组件里

<template>
    <div>
        <slide-verify 
    ref="slideblock"
    @again="onAgain"
    @fulfilled="onFulfilled"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
    :accuracy="accuracy"
    :slider-text="text"
></slide-verify>
<!-- <div>{{msg}}</div> -->

<!-- <button @click="handleClick">在父组件可以点我刷新哦</button> -->
    </div>
</template>
    
<script>
// import { getCode, } from "../utils/api";

export default {
   name: 'App',
    data(){
        return {
            timer:null,
            msg: '',
            text: '向右滑',
            // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
            accuracy: 3,
            phone:""
        }
    },
    created(){
                this.phone = this.$route.query.inviteCode;
            
    },
    methods: {
        onSuccess(times){
           console.log('验证通过，耗时 +' +times + '毫秒');
           this.$emit("onSuccess")
           this.$notify({ type: "primary", message: "验证成功" }); 
            this.msg = `验证成功， 耗时${(times / 1000).toFixed(1)}s`
        
      
        },
        onFail(){
            console.log('验证不通过');
            this.msg = ''
        },
        onRefresh(){
            console.log('点击了刷新小图标');
            this.msg = ''
        },
        onFulfilled() {
            console.log('刷新成功啦！');
        },
        onAgain() {
            console.log('检测到非人为操作的哦！');
            this.msg = 'try again';
            // 刷新
            this.$refs.slideblock.reset();
        },
        handleClick() {
        	// 父组件直接可以调用刷新方法
            this.$refs.slideblock.reset();
        },
    }
}

</script>