SOURCE

<template>
  <span class="verifycode" @click="changeCode" title="点击刷新">
    <img :src="codeUrl" @error="error" v-if="codeUrl" />
    <template v-else>
      <em>验证码图片</em>
    </template>
    <i class="el-icon-loading" v-if="imgCodeLoading"></i>
  </span>
</template>

<script>
/*
  **************************************************
  version: '0.10'
  author": "46898"
  description": 验证码组件
  **************************************************
 */
import { mapActions } from 'vuex'
export default {
  name: 'User',
  components: {
  },
  model: {
    prop: 'val',
    event: 'update'
  },
  props: {
    val: {
      type: Boolean
    }
  },
  data () {
    return {
      imgCodeLoading: false,
      codeUrl: ''
    }
  },
  computed: {
  },
  methods: {
    ...mapActions(['getImgCode']),
    // 验证码图片加载异常
    error (e) {
      this.codeUrl = ''
    },
    // 点击刷新验证码
    changeCode () {
      const { imgCodeLoading, getCode } = this
      if (!imgCodeLoading) {
        this.$emit('change')
        getCode()
      }
    },
    // 验证码
    async getCode () {
      const { getImgCode, imgCodeLoading } = this
      if (!imgCodeLoading) {
        this.imgCodeLoading = true
        try {
          const { blob } = await getImgCode()
          this.codeUrl = window.URL.createObjectURL(blob)
          // this.codeUrl = window.URL.createObjectURL(new Blob([blob], { type: 'image/png' }))
        } catch (error) {
        }
        this.val && this.$emit('update', false)
        this.imgCodeLoading = false
      }
    }
  },
  mounted () {
    this.getCode()
  },
  watch: {
    val: {
      handler (newVal) {
        newVal && this.getCode()
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
.verifycode {
  img,
  em {
    cursor: pointer;
  }
}
</style>