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

显示结果：

具体代码可以根据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"/></el-form-item><el-form-item prop="password"><span class="svg-container"><svg-icon icon-class="password" /></span><el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" /><span class="show-pwd" @click="showPwd"><svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /></span></el-form-item></div><!-- 在cur==1时此板块显示 其他时候此板块不显示 --><div v-show="cur==false" 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"/></el-form-item><el-form-item prop="code"><span class="svg-container"><svg-icon icon-class="password" /></span><el-input ref="code" v-model="loginForm.code" type="text" placeholder="请输入验证码" name="code" abindex="2" maxlength="6" auto-complete="on" @keyup.enter.native="handleLogin" /><span class="show-pwd"><el-button :loading="sending" :disabled="sendDisabled" size="small" @click="onSendSms">{{ sendButtonText }}</el-button></span></el-form-item></div></div><el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button></el-form>

js业务逻辑

<script>
import { sendSms } from "@/api/user";
import Cookie from "js-cookie";
import moment from "moment";export default {name: "Login",data() {return {loginForm: {mobile: "",// 手机号code: "",// 验证码password: '' //密码},cur:true,//true代表密码, false代表短信sending: false,sendDisabled: false,loading: false,timer: 0,passwordType: 'password',redirect: undefined};},computed: {sendButtonText() {if (this.timer === 0) {return "发送验证码";} else {return `${this.timer}秒后重发`;}}},watch: {$route: {handler: function(route) {this.redirect = route.query && route.query.redirect;},immediate: true},timer(num) {if (num > 0) {setTimeout(() => {this.timer = --num;}, 1000);}}},created() {const lastSendTime = Cookie.get("last-send-time");if (lastSendTime) {const timer = 60 - moment().diff(moment(lastSendTime), "seconds");this.timer = timer > 0 ? timer : 0;}},methods: {onSendSms() {this.loginWay = false;this.$refs.loginForm.validateField("mobile", err => {if (!err) {this.sending = true;const { mobile } = this.loginForm;sendSms({ mobile }).then(() => {this.$message.success("短信发送成功，请注意查收");Cookie.set("last-send-time", new Date());this.timer = 60;}).catch(e => {this.$message.error("网络异常");console.log(e);}).finally(() => (this.sending = false));}});},showPwd() {this.loginWay = true;if (this.passwordType === 'password') {this.passwordType = ''} else {this.passwordType = 'password'}this.$nextTick(() => {this.$refs.password.focus()})},handleLogin() {this.$refs.loginForm.validate(valid => {if (valid) {this.loading = true;this.$store.dispatch("这里是登录地址", this.loginForm).then(() => {this.$router.push({ path: '这里是登录成功跳转的页面' })this.loading = false;}).catch(() => {this.loading = false;});} else {console.log("error submit!!");return false;}});}}
};
</script>

别忘了修改页面样式，否则页面显示会有问题

<style>
a{color: #fff;margin: 50px;
}
.login_header{margin-bottom: 30px;text-align: center;
}
.login_header span{margin-right: 20px;cursor: pointer;
}
.Cbody_item{border: 0px solid #999;overflow: hidden;
}
.active{color:#fff;padding-bottom: 10px;border-bottom: 3px solid #fff;
}
</style>

以上内容就是整体的登录页面修改

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

最新京东短信登录，免费送JDCK获取短信登录
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 上车地址:http://jdck.51kaniqy.com/ 一键部署脚本命令安装傻妞: 一.傻妞一键安装二.配置傻妞三.对接青龙面板四 ...
青龙2.11.3版本对接傻妞+go-cqhttp+短信登录(Maiark)(兔子）+本地服务器直连GitHub
目录青龙面板常用指令装面板前的准备安装青龙面板傻妞机器人安装教程: 芝士配置和命令对接nodebot机器人 2.安装pm2 4.安装go -cqhttp 服务器下载go-cqhttp ...
技术基础篇(二)之用户短信登录
需求分析 1.登录效果图 2.登录需求登录方式:手机号码+手机验证码 3.从登录model中获取手机号和验证码,首先判断手机号或验证码是否为空,其次判断验证码与输入验证码是否一致, 4.如果没有注册 ...
MySQL5.7.12新密码登录方式及密码策略
MySQL5.7.12新密码登录方式及密码策略在Centos6.6上安装MySQL5.7.12时,遇到了一个问题安装后在/root目录下没有发现有.mysql_secret这个文件,所以没有没法按 ...
腾讯云Windows/Linux服务器登录方式及密码获取方法
腾讯云服务器操作系统不同登录方式也不同,Windows服务器只能是密码登录,Linux服务器可选密码登录也可以选择SSH密匙登录,腾讯云百科来详细说下腾讯云服务器登录方式及密码查看获取方法: 腾讯云服 ...
vue实现短信登录和密码登录
效果图如下短信验证和密码验证切换是根据loginWay来判断的,若是true代表短信登陆, false代表密码,手机号,用户名等用正则来验证 <template><div clas ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
（5）安装获取CK的方式短信登录【2022年1月12日更新】
这节内容大致上是分两种方式安装一个是手动安装,一个是一键脚本安装,教程末尾再教大家怎么样做一个页面去拉韭菜来挂机. 因为使用的机器人程序是qqbot对接诺兰大佬的NVJDC相对来说还是非常简单的,连青 ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...

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

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

最新文章

热门文章