100字范文 > Vue滑块验证码使用

Vue滑块验证码使用

时间：2023-09-23 22:39:00

相关推荐

Vue滑块验证码使用

使用步骤：1，安装插件：

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

2，在main.js中使用一下

import Vue from 'vue'import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);

直接上效果吧

<template><el-dialogtitle="新建子账号"top="8vh":visible="addChildShowDialog"@close="handleCloseDialog"@open="openDialog"><el-formref="childForm":model="childForm":rules="childFormrules"label-width="120px"style="width: 92%"><el-form-item label="子账号" prop="userName"><el-input v-model="childForm.userName" placeholder="请输入子账号" /></el-form-item><el-form-item label="手机号" prop="phoneNum"><el-input v-model="childForm.phoneNum" placeholder="请输入手机号" /></el-form-item><el-form-item label="验证码" prop="smsCode"><div class="smsCode"><el-inputv-model="childForm.smsCode"class="bind_code_input code"type="text"placeholder="请输入手机验证码"/><el-buttonclass="codebtn":disabled="disabled"@click.native.prevent="SendCode">{{btnText }}</el-button><el-buttonv-if="VerifyType === 'open'"class="codebtn"@click.native.prevent="SendVerif">解锁验证码</el-button><div v-show="VerifyShow" class="page-slidecode"><slide-verifyref="slideblock":l="42":r="10":w="330":h="165":accuracy="accuracy":slider-text="text"@again="onAgain"@fulfilled="onFulfilled"@success="onSuccess"@fail="onFail"@refresh="onRefresh"/></div></div></el-form-item></el-form><template v-slot:footer><el-buttonstyle="margin-top: 12px"type="primary"@click="onSubmit">确定</el-button><el-button @click="handleCloseDialog">取消</el-button></template></el-dialog></template><script>import {reqAddCustomerChildren, reqSendCode, imgCode } from '@/api/children'export default {name: 'CloudControlChildAdd',props: {addChildShowDialog: {type: Boolean,required: true}},data() {var checkUserName = (rule, value, callback) => {// 账号最长15个字符账号只能包含字母、数字、下划线账号必须以字母开头,数字或字母结尾const regUserName = /^[a-zA-Z]([-_a-zA-Z0-9]{4,16})$/if (regUserName.test(value)) {return callback()} else {callback(new Error('账号最长15位,只能包含字母、数字、下划线,必须以字母开头'))}}var checkMobile = (rule, value, callback) => {const regMobile = /^1[34578]\d{9}$/if (regMobile.test(value)) {return callback()}callback(new Error('请输入合法的手机号码'))}return {childForm: {userName: '',phoneNum: '',smsCode: ''},// 验证码按钮type: '',btnText: '获取验证码',disabled: false,// 滑块验证VerifyShow: false,VerifyType: 'open',text: '向右滑动~',// 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5accuracy: 3,uuid: '',childFormrules: {userName: [{required: true,message: '请输入子账号',trigger: ['blur', 'change']},{validator: checkUserName, trigger: 'blur' }],phoneNum: [{required: true,message: '请输入手机号码',trigger: ['blur', 'change']},{validator: checkMobile, trigger: 'blur' }],smsCode: [{required: true,message: '请输入验证码',trigger: ['blur', 'change']}]}}},methods: {// 關閉彈層handleCloseDialog() {this.$emit('update:addChildShowDialog', false)this.childForm = {userName: '',phoneNum: '',smsCode: ''}this.$refs.childForm.resetFields()this.VerifyShow = falsethis.VerifyType = 'open'this.$refs.slideblock.reset()},// 開啓彈層openDialog() {},// 解锁滑块async SendVerif() {this.VerifyShow = true},// 发送验证码SendCode() {this.$refs.childForm.validateField('phoneNum', async(errorMessage) => {if (!errorMessage) {await reqSendCode(this.childForm.phoneNum + '/' + this.uuid)// console.log(res)this.disabled = truethis.btnText = '请稍候...'setTimeout(() => {this.doLoop(3)}, 500)} else {return false}})},// 手机验证码的倒计时doLoop(seconds) {seconds = seconds || 60this.btnText = seconds + 's后获取'const countdown = setInterval(() => {if (seconds > 0) {this.btnText = seconds + 's后获取'--seconds} else {this.btnText = '获取验证码'this.disabled = falsethis.VerifyType = 'open'clearInterval(countdown)}}, 1000)},// 新增子账号onSubmit() {this.$refs.childForm.validate(async(valid) => {if (!valid) returnconst res = await reqAddCustomerChildren(this.childForm)if (res.code === 200) {this.$message.success('新增子账号成功')this.handleCloseDialog()this.$emit('getChildrenList')}})},async onSuccess() {this.$message({message: '验证通过',type: 'success'})const res = await imgCode()this.uuid = res.uuidthis.VerifyType = 'close'this.VerifyShow = falsethis.$refs.slideblock.reset()},onFail() {this.$message({message: '验证未通过',type: 'error'})},onRefresh() {// console.log('点击了刷新小图标');},onFulfilled() {// console.log('刷新成功啦！');},onAgain() {// console.log('检测到非人为操作的哦！');// 刷新this.$refs.slideblock.reset()},handleClick() {// 父组件直接可以调用刷新方法this.$refs.slideblock.reset()}}}</script><style lang="scss" scoped>.smsCode {position: relative;}.codebtn {position: absolute;top: 1px;right: 1px;font-size: 12px;font-weight: 500;color: #1b3dd1;height: 38px;border: none;border-left: 1px solid #dcdfe6;}::v-deep .el-dialog {width: 600px;}.page-slidecode{position: absolute;background-color: #fff;z-index: 100;padding: 20px;top:-120px;left: 50%;transform: translate(-50%);}</style>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。