vue element admin登录方式切换（密码登录或短信登录）

最新推荐文章于 2024-07-26 16:38:35 发布

srz1128

最新推荐文章于 2024-07-26 16:38:35 发布

阅读量5k

点赞数 12

文章标签： vue html

本文链接：https://blog.csdn.net/srz1128/article/details/109532294

版权

这篇博客介绍了如何在Vue Element Admin项目中切换登录方式，包括密码登录和短信登录。主要内容涉及源码修改、JS业务逻辑更新以及相应页面样式的调整，确保登录页面正常显示。

摘要由CSDN通过智能技术生成

显示结果：

具体代码可以根据vue element admin源码进行更改，下面是页面代码

<el-form ref="loginForm" :model="loginForm" class="login-form" auto-complete="on" label-position="left" >
      <div class="title-container">
        <h3 class="title">系统登录</h3>
        <div class="login_header">
          <a @click="cur=true" :class="{active:cur==true}">密码登录</a>
          <a @click="cur=false" :class="{active:cur==false}">短信登录</a>
        </div>
      </div>

   
    <div class="login_content">
                  <!-- 在cur==0时此板块显示 其他时候此板块不显示 -->
          <div v-show="cur==true" class="Cbody_item">
            <el-form-item prop="mobile">
                <span class="svg-container">
                  <svg-icon icon-class="user" />
                </span>
                <el-input  ref="mobile" v-model="loginForm.mobile" placeholder="请输入手机号" name="mobile" type="text" tabindex="1" auto-complete="on"/>