vue实现弹窗输入验证码

实现思路:前端输入完账号和密码,点击登录按钮的时候,弹出一个输入验证码的窗口,后端把验证码图片通过base64的字符传给前端,前端把字符当成图片展示出来。输入完验证码,点击确认进行登录,把验证码传给后端,后端判断验证码是否准确。

前端获取验证码的接口

/component/GraphCodeDialog /index.vue 封装成组件

复制代码
<template>
    <el-dialog v-model="dialogVisible" title="获取验证码" width="500">
        <div class="row">
            <img :src="codeImg" style="height: 150px;width:380px" @click="getCodeImge()" />
        </div>
        <div class="row">
            <el-input type="text" placeholder="请输入验证码" v-model="captcode" @keyup.enter="handleAffirm" style="width: 300px;"
                maxlength="6">
            </el-input>
            <el-button type="primary" @click="handleAffirm">确认</el-button>
        </div>
    </el-dialog>
</template>
<script lang='ts'>
import { reactive, getCurrentInstance, toRefs, onMounted, nextTick, defineComponent } from 'vue';
export default defineComponent({
    name: '',
    props: {},
    setup(props: any, { emit }: any) {
        onMounted(() => {
            nextTick(() => { });
        });
        const { proxy } = getCurrentInstance() as any;
        const data = reactive({
            dialogVisible: false,
            codeImg: "",
            captcode: "",
        });

        const handleAffirm = () => {
            if (!data.captcode) return proxy.$message.warning("请输入验证码")
            data.dialogVisible = false
            emit("handleAffirm", data.captcode)
            data.captcode = ''
        }

        const getCodeImge = async () => {
            let res = await proxy.apis.loginCaptchacode()
            if (res.code == 200) {
                data.codeImg = res.data
                data.dialogVisible = true
            } else {
                proxy.$message.error(res.message)
            }
        }

        return { ...toRefs(data), handleAffirm, getCodeImge }
    }
})
</script>
<style scoped lang='scss'>
.row {
    text-align: center;
    margin-bottom: 20px;
}
</style>

页面文件

template代码

复制代码
<!-- 获取图片验证码 -->
<GraphCodeDialog ref="codeImgRef" @handleAffirm="getCodeAffirm"></GraphCodeDialog>

script代码

复制代码
<script setup lang="ts" name="loginIndex">
// 引入组件
const GraphCodeDialog = defineAsyncComponent(() => import('/@/component/GraphCodeDialog /index.vue'));


const getCodeAffirm = (captcode: string) => {
	console.log("验证码=",captcode);
}
</script>

效果图

相关推荐
天天向上102415 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y31 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁38 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry38 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录39 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟40 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan44 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构
vvilkim1 小时前
Nuxt.js 全面测试指南:从单元测试到E2E测试
开发语言·javascript·ecmascript
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui