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>

效果图

相关推荐
IT_陈寒1 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿1 小时前
react 实现插槽slot功能
前端
stoneship1 小时前
Web项目减少资源加载失败白屏问题
前端
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员2 小时前
一文读懂Font文件
前端
Asort2 小时前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
真夜2 小时前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js