源代码

<template><div class="login"><el-button type="success" class="loginButton" @click="centerDialogVisible = true" >Login</el-button><el-dialogtitle="系统登录":append-to-body="true":visible.sync="centerDialogVisible"width="320px"v-loading="loading"element-loading-text="正在登录..."element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"center><el-form:rules="rules"ref="loginForm":model="loginForm"><el-form-item prop="username"><el-input size="normal" type="text" v-model="loginForm.username" auto-complete="off"placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password"><el-input size="normal" type="password" v-model="loginForm.password" auto-complete="off"placeholder="请输入密码"></el-input></el-form-item><el-form-item prop="code"><el-input size="normal" type="text" v-model="loginForm.code" auto-complete="off"placeholder="点击图片更换验证码" @keydown.enter.native="submitLogin"  style="width: 75%"></el-input><el-image :src="vcUrl" @click="updateVerifyCode" alt="" style="width: 25%;line-height: normal;overflow: visible"/></el-form-item><el-form-item class="loginRemember"><el-checkbox size="normal"  v-model="checked">Remember me</el-checkbox></el-form-item><el-form-item class="loginSubmitButton"><el-button type="primary" @click="centerDialogVisible = false">取 消</el-button><el-button type="primary" @click="submitLogin">登录</el-button></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-divider>其他登录方式</el-divider><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></span></el-dialog></div>
</template><script>export default {name: "Login",data() {return {loading: false,vcUrl: '/verifyCode?time='+new Date(),loginForm: {username: 'admin',password: '123',code:''},checked: true,centerDialogVisible: false,rules: {username: [{required: true, message: '请输入用户名', trigger: 'blur'}],password: [{required: true, message: '请输入密码', trigger: 'blur'}],code: [{required: true, message: '请输入验证码', trigger: 'blur'}]}}},methods: {updateVerifyCode() {this.vcUrl = '/verifyCode?time='+new Date();},submitLogin() {this.loading = true;this.postKeyValueRequest('/doLogin', this.loginForm).then(resp => {this.loading = false;console.log(resp)})}}}
</script><style>.login{display: inline-block;}.loginButton{display: inline-block;}.loginRemember {text-align: left;margin: 0px 0px 15px 0px;}.loginSubmitButton{text-align: center;}
</style>

运行结果

参考项目

https://github.com/lenve/vhr

Vue + Element UI——对话框式登录框DEMO相关推荐

Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面话不多说,先上图界面效果图下面直接上代码: <template><div class="loginbody&q ...
Vue实现Element UI的下拉框默认选中，值来自父组件或异步获取
子组件使用watch监听父组件传过来的值,并且赋值给子组件的data参数. 1.父组件传了一个userId属性给子组件 <Children@searchForm="searchForm ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...

Vue + Element UI——对话框式登录框DEMO

源代码

运行结果

参考项目

Vue + Element UI——对话框式登录框DEMO相关推荐

最新文章

热门文章