vue图片验证码

白小码

已于 2022-06-27 17:53:09 修改

阅读量301

点赞数 1

分类专栏：前端知识文章标签：前端前端框架

于 2022-06-27 17:48:53 首次发布

本文链接：https://blog.csdn.net/m0_57364615/article/details/125488670

版权

前端知识专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

页面

 <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;
                    }