当前位置 博文首页 > IT13333的博客：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>
