vue 如何实现点击动态更新图形验证码

怼烎@ 2023-07-24 14:41 19阅读 0赞

一、vue 点击动态更新图形验证码

  1. 在验证码的图片上,绑定点击事件 getCaptcha(),同时使用 ref 指明图形验证码的引用对象,代码如下所示:

  2. methods,定义 getCaptcha 的方法,通过 this.$refs 获取到图形验证码的引用对象,为其指明 src 路径,利用时间差,时间一直是在变化的,Date.now(),这样就可以动态生成图形验证码,代码如下所示:

    methods: {

    1. // 获取一个新的图形验证码
    2. getCaptcha(event) {
    3. this.$refs.captcha.src = 'http://localhost:4000/captcha?time=' + Date.now()
    4. }

    }

  3. 效果如下图所示:
    在这里插入图片描述
    在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,19人围观)

还没有评论,来说两句吧...

相关阅读

    相关 读秒获取验证按钮实现

    在桌面上面创建一个后缀名.html的文本,把代码复制进去就可以测试了。注意如需要做的好看点,样式自己添加。 1.需要给button设置背景,字体颜色,2.点击以后设置变化颜色