vue图片验证码

其实很简单,因为是后端给的图片,自己展示以下就可以,我主要是记录以下样式,贼好用

页面

 <img :src="codeImg" @click="refreshCode" class="codeImgCss" />

  created ,methods,记得在data申明codeImg

  created() {
    this.getCode();
  },
  methods: {
    getCode() {
      getImgCode().then((res) => {
        // console.log(res)
        if(res.data.code=="200"){
          this.codeImg = res.data.data.image
          this.form.validateKey =res.data.data.key
        }
      });
    },
}

//样式
  .codeImgCss{
                        width: 100px;
                        height: 38px;
                        background-color: #fdfdfd;
                        border: 1px solid #DCDFE6;
                        color: #333;
                        font-size: 14px;
                        font-weight: bold;
                        letter-spacing: 5px;
                        line-height: 38px;
                        text-indent: 5px;
                        text-align: center;
                        cursor:pointer!important;
                    }