Vue如何实现不同登录方式的切换（账号密码登录、邮箱验证登录等）

文章目录

前言

通常情况下，一个系统无论是前台或者还是后台，从用户层面的考量都不止一种登录方式。
登录方式可以是：账号密码登录、邮箱验证登录、手机短信验证登录、第三方登录…
需要自己单独在页面实现切换的方式吗？（比如说，通过对组件的设置实现登录和注册按钮的切换，也是很简单的一种方式）
可以，但不高效。
如何高效的实现切换呢？请听我一一道来！

一、使用vue开发框架的时候，无论是vue2或是vue3，都会运用到element ui组件库或是element-plus ui组件库，所以我们要解决的问题首先从这些组件库里来找寻答案

参考实例：ProcessOn的登录方式的切换

ProcessOn登录的方式

二、项目里按需引入或者全局导入element ui组件库或是element-plus ui组件库

1.省略常规操作，直接在页面中引入Tabs（标签页）组件

官方示例：

代码如下：

<el-tabs :stretch="true"><el-tab-pane label="账号密码登录"><!-- 账号密码登录表单 --><el-form ref="pwdLoginFormRef":model="pwdLoginForm":rules="pwdLoginFormRules"><!-- 用户名 --><el-form-item prop="username"><el-input placeholder="用户名/邮箱/手机号" clearable prefix-icon="el-icon-user" v-model="pwdLoginForm.username"></el-input></el-form-item><!-- 密码 --><el-form-item prop="password"><el-input placeholder="密码" type="password" show-password prefix-icon="el-icon-lock" v-model="pwdLoginForm.password"></el-input></el-form-item><!-- 按钮区域 --><el-form-item class="login_btns"><el-button type="primary" @click="pwdLogin">登录</el-button><el-button type="success"><router-link to="/register">注册</router-link></el-button></el-form-item></el-form></el-tab-pane><el-tab-pane label="邮箱验证登录"><!-- 邮箱验证登录表单 --><el-form ref="emailLoginFormRef":model="emailLoginForm":rules="emailLoginFormRules"><!-- 邮箱 --><el-form-item prop="email"><el-input placeholder="邮箱" clearable prefix-icon="el-icon-message" v-model="emailLoginForm.email"></el-input></el-form-item><!-- 邮箱验证码 --><el-form-item prop="emailCode"><el-input placeholder="验证码" prefix-icon="el-icon-key" v-model="emailLoginForm.emailCode"><template #append><el-button>获取验证码</el-button></template></el-input></el-form-item><!-- 按钮区域 --><el-form-item class="login_btns"><el-button type="primary" @click="emailLogin">登录</el-button><el-button type="success"><router-link to="/register">注册</router-link></el-button></el-form-item></el-form></el-tab-pane><el-tab-pane label="手机验证登录"><!-- 手机验证登录表单 --><el-form ref="phoneLoginFormRef":model="phoneLoginForm":rules="phoneLoginFormRules"><!-- 手机号 --><el-form-item prop="phone"><el-input placeholder="手机号" clearable prefix-icon="el-icon-phone" v-model="phoneLoginForm.phone"></el-input></el-form-item><!-- 手机验证码 --><el-form-item prop="phoneCode"><el-input placeholder="验证码" prefix-icon="el-icon-key" v-model="phoneLoginForm.phoneCode"><template #append><el-button>获取验证码</el-button></template></el-input></el-form-item><!-- 按钮区域 --><el-form-item class="login_btns"><el-button type="primary" @click="phoneLogin">登录</el-button><el-button type="success"><router-link to="/register">注册</router-link></el-button></el-form-item></el-form></el-tab-pane></el-tabs>

2.运行后的效果

通过点击上面的Tabs（标签）实现三种不同的登录方式

三、再说一下Tabs（标签页）的属性（根据项目的实际需求添加）

通过给

el-tabs

添加

:stretch="true"

的属性值，实现撑满上方页头的功能；
通过给

el-tabs

添加

type="border-card"

的属性值，实现带有边框的卡片风格样式；
通过给

el-tabs

添加

type="card"

的属性值，实现卡片风格的样式；