源代碼?

<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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。