前端案例：简易登录表单的制作，包括用户名、密码、随机验证码（代码完整(1)

最新推荐文章于 2024-05-21 23:21:19 发布

参考信息

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量414

点赞数 3

分类专栏：程序员文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/java_dazhuzhu/article/details/138390088

版权

程序员专栏收录该内容

197 篇文章 0 订阅

订阅专栏

    <div class="userAndPass">
      <el-input class="txt" type="password" v-model="pwd" placeholder="密码"></el-input>
    </div>
    <!--验证码-->
    <div class="userAndPass">
      <el-input class="txt" type="text" v-model="code" placeholder="验证码"></el-input>
    </div>

    <!--验证码区域-->
    <div id="codeBox">
      <canvas width="112" height="38" id="verifyCanvas"></canvas>
    </div>
    <!--验证码生成的图片-->
    <img id="code_img" @click="refreshCode">

    <div style="display: flex;">
      <!--记住密码-->
      <div class="remember" @click="rem">
        <img v-show="isRem" src="/static/login_new1/Select%20Reveal.png" alt="">
        <div v-show="notRem"
             style="width: 0.2rem;height: 0.2rem;background-color: white;border-radius: 50%;margin-right: 0.05rem"></div>
        记住密码
      </div>
      <!--登录按钮-->
      <div class="btn" @click="login">
        <p>登录</p>
      </div>
    </div>

    <p @click="forget" class="forget">忘记密码?</p>
  </div>
</div>