关于获取验证码 vue+element

先看效果图吧~

一步一步解析吧。

1、样式以及dom （校验我就不写了但是我会给加校验的方式）

<el-form-item label="验证码" prop="check">
            <el-input type="text"
                      clearable
                      style=" width: 55%;"
                      v-model="loginForm.check"
                      placeholder="请输入验证码">
            </el-input>
            <div style="width:100px;height:42px;float: right;margin-right: 30px" @click="refreshCode">
              <img :src="getVerfyCode" style="width:100px;height:35px;cursor: pointer">
            </div>
          </el-form-item>

这里img显示的图片是后台给的blob格式

首先，在created中 先存一下验证码的规则。时间戳加随机数 根据需求修改

 export default {
    name: 'Login',
    data () {
      return {
        loginForm: {},
        getVerfyCode: '',
        key: '',
        //校验方式
        loginRules: {
          username: [
            { required: true, trigger: 'blur', validator: validateUsername }],
          password: [
            { required: true, trigger: 'blur', validator: validatePassword }],
          check: [
            { required: true, message: '请输入4位验证码！', trigger: 'blur', },
            { min: 4, max: 4, message: '长度为4个字符！', trigger: 'blur' }]
        },
        uuidKey:''
      }
    },
    created () {
      this.$cookieStore.setCookie('checkKey', this.generateUUID())//生成uuid存储一下
      this.getCode() //获取验证码
      this.$cookieStore.delCookie('token') // 清除cookie
      this.$cookieStore.delCookie('workType')
      this.$cookieStore.delCookie('username')

    },
    methods: {
      handleLogin () {
      //登陆校验
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.$store.dispatch("Login", this.loginForm)
              .then(r => {
                if (r.success) {
                  this.$router.push("/edu/home");
                } else {
                  this.$message({
                    message: r.message,
                    type: 'warning'
                  });
                }
              })
              .catch(r => {
                console.log(r)
              });
          } else {
            return false
          }
        })
      },
      //注册
      registerUser () {
        this.$router.push({ path: '/register' })
      },
      generateUUID () {
        let d = new Date().getTime()
        let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          let r = (d + Math.random() * 16) % 16 | 0
          d = Math.floor(d / 16)
          return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16)
        })
        return uuid
      },
      getCode () {
        this.key = this.$cookieStore.getCookie('checkKey')
        this.loginForm.key = this.key
        console.log(this.key);
        //在这里调用接口获取后台给的url 调用接口的时候 需要自己加参数 当然，传参不只这一种方式（调用接口方法每个人估计不一样 一定要换）
        this.$axios({
          method: 'get',
          url: '/auth/getCode?key=' + this.key + '&' + new Date().getTime(),
          responseType: 'blob'
        }).then(res => {
          const content = res.data
          const blob = new Blob([content])
          let url = window.URL.createObjectURL(blob)
          //赋值给我们要渲染的地方
          this.getVerfyCode = url
        })
          .catch(function (error) {
            console.log(error)
          })
      },
      //点击图片的时候更换验证码
      refreshCode () {
        this.getCode()
      },
    }
  }