VUE项目图形验证码功能组件

图形验证码功能

---

1. 使用方式

<zsy-picture-code ref="pictureCodeRef" v-model="form.codeImgKey" />

2. 父组件主动更新验证码

this.$refs.pictureCodeRef.getCodeImg();

3. 验证码组件

<template>
  <img class="code-img" v-if="codeImg" :src="codeImg" @click="getCodeImg" :style="`width: ${width}px;height: ${height}px;`" alt="">
</template>

<script>
export default {
  emits:['getCodeImg','update:modelValue'],
  props: {
    width: {
      default: 80,
    },
    height: {
      default: 24,
    },
    modelValue:{
      default: ""
    }
  },
  data() {
    return {
      codeImg: '',
      time: 0,
      timer:null
    }
  },
  created() {
    this.getCodeImg()
  },
  methods: {
    async getCodeImg() {
      // this.$API.public.codeImg.get() 验证码获取请求
      const data = await this.$API.public.codeImg.get()
      if (data.code == 200) {
        this.codeImg = data.data.baseImg
        this.$emit('update:modelValue',data.data.graphicalCodeKey)
        this.getNewCode()
      }else{
        this.codeImg = ''
        this.$emit('update:modelValue','')
        this.$message.warning(data.msg)
      }
    },
    async getNewCode() {
      this.time = 60
      this.timer = setInterval(() => {
        this.time -= 1
        if (this.time < 1) {
          clearInterval(this.timer)
          this.getCodeImg()
          this.time = 0
        }
      }, 1000)
    },
  },
  updated(){
    clearInterval(this.timer)
  },
  unmounted(){
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
.code-img{
  cursor: pointer;
}
</style>