【ApiCode】切换element标签页组件时重新生成验证码

春暖花开.,

于 2023-06-03 19:03:08 发布

阅读量101

点赞数

文章标签： vue.js 前端框架 elementui javascript html

本文链接：https://blog.csdn.net/m0_64494670/article/details/131024425

版权

这里主要利用了 &key=${ this.refreshCode }，然后在切换标签页时会将 refreshCode赋值为 true ，为true时 &key=${ this.refreshCode } 条件会触发Date.now() 生成当前时间，会重新生成验证码

<template>
  <el-tabs @tab-click="handleClick">
    <el-tab-pane label="用户登录" name="first">
      <div class="grid-content bg-purple-dark">
          <img :src="RandomVerificationCode" alt="" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="商家登录" name="second">
      <div class="grid-content bg-purple-dark">
          <img :src="RandomVerificationCode" alt="" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>  

  data () {
    return {
      refreshCode: false
    }
  },

computed: {
    RandomVerificationCode () {
      return `/api_proxy/recycle/captcha?r=${Math.random()}&key=${
        this.refreshCode ? Date.now() : ''
      }`
    }
  },

methods: {
 // 标签页切换时触发
   handleClick(tab, event) {
    this.refreshCode = !this.refreshCode;
  }
},