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);
html
<slide-verify :l="42"
:r="10"
:w="310"
:h="155"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:slider-text="text"
>
</slide-verify>
js
export default {
data(){
return {
text: '向右滑',
}
},
methods: {
onSuccess(){
console.log('验证成功')；
},
onFail(){
},
onRefresh(){
}
}
}
原生js模拟点击事件
通过点击一个按钮，自动触发另一个按钮的点击事件
<button id="btn-1">Button-1</button>
<button id="btn-2">Button-2</button>
<script>
// 假如想通过点击 Button-1 触发 Button-2 的某个事件
let btn_1 = document.getElementById('btn-1');
let btn_2 = document.getElementById('btn-2');
btn_1.onclick = function () {
var myEvent = new Event('click');
btn_2.dispatchEvent(myEvent);
}
btn_2.onclick = function () {
alert('OK')；
}
</script>
登录页代码
<template>
<div class="login">
<h3>欢迎登录西藏锦绣</h3>
<ul class="msg">
<li class="flex">
<input v-model="tel" type="text" placeholder="请输入手机号码(+86)" />
</li>
<li class="flex">
<input v-model="code" class="solo" type="text" placeholder="请输入验证码" />
<p @click="getCode">{{timeover?'获取验证码':`${time}s重新获取`}}</p>
</li>
<button @click="login">登录</button>
</ul>
<div class="msk" v-show="showSlide"></div>
<slide-verify
v-show="showSlide"
:l="42"
:r="10"
:w="310"
:h="155"
@success="onSuccess"
@fail="onFail"
@refresh="onRefresh"
:slider-text="text"
></slide-verify>
</div>
</template>
<script>
export default {
data() {
return {
msg: "",
text: "向右滑",
tel: "",
code: "",
flag: false, //登录按钮是否激活
showSlide: false, //是否显示验证块
time: 8, //倒计时
timeover: true //倒计时是否结束
};
},
methods: {
onSuccess() {
this.timeover = false;
this.showSlide = false;
// 倒计时
let timerId = setInterval(() => {
this.time -= 1;
if (this.time <= 0) {
clearInterval(timerId);
this.timeover = true;
this.time = 8;
}
}, 1000);
},
onFail() {
this.msg = "";
},
onRefresh() {
this.msg = "";
},
// 点击获取验证码
getCode() {
if (!this.timeover) {
return false;
} else if (!/^1[3456789]\d{9}$/.test(this.tel)) {
this.$toast("请输入正确的手机号");
return false;
} else {
this.showSlide = true;
// 通过点击获取验证码按钮自动触发滑块验证的刷新按钮
let butn = document.querySelector(".slide-verify-refresh-icon");
var myEvent = new Event("click");
butn.dispatchEvent(myEvent);
}
},
// 点击登录
login() {
if (!/^1[3456789]\d{9}$/.test(this.tel)) {
this.$toast("请输入正确的手机号");
return false;
} else if (this.code.length != 4) {
this.$toast("请输入正确的验证码");
return false;
} else {
// 调取登录接口
}
}
},
mounted() {
let butn = document.querySelector(".slide-verify-refresh-icon");
butn.onclick = function() {
// 没有打印，是因为模拟点击刷新按钮，那个按钮原本绑定了一个refresh事件，覆盖了这个事件
console.log(333333333333);
};
}
};
</script>
<style lang="less" scoped>
.login {
padding: 300px 100px;
color: rgba(51, 51, 51, 1);
min-height: 100vh;
h3 {
font-size: 48px;
font-weight: 400;
}
.msg {
margin: 55px 0 75px;
li {
height: 135px;
padding-top: 35px;
border-bottom: 1px solid #eeeeee;
input {
width: 100%;
&.solo {
width: 70%;
}
}
p {
width: 173px;
padding: 6px 0;
border: 1px solid rgba(153, 153, 153, 1);
border-radius: 24px;
font-size: 24px;
color: rgba(153, 153, 153, 1);
text-align: center;
}
}
button {
width: 100%;
height: 88px;
background: rgba(70, 159, 241, 1);
border-radius: 24px;
font-size: 34px;
color: rgba(255, 255, 255, 1);
margin-top: 90px;
}
}
.slide-verify {
position: fixed;
left: 50%;
height: 50%;
transform: translate(-50%, -70%);
}
.msk {
width: 100%;
height: 100vh;
position: fixed;
left: 0;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.8);
}
}
</style>
