blackteay/vue-element-admin
1
0
Fork 0
mirror of https://github.com/PanJiaChen/vue-element-admin.git synced 2025-08-10 12:01:57 +08:00
Code Issues Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
projoin 2022-05-25 14:00:05 +08:00
parent ec65202cb9
commit 6bb66758ba
2 changed files with 119 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
.codesandbox/workspace.json Normal file
View File

@ -0,0 +1,20 @@
{
"responsive-preview": {
"Mobile": [
320,
675
],
"Tablet": [
1024,
765
],
"Desktop": [
1400,
800
],
"Desktop HD": [
1920,
1080
]
}
}

166
src/views/login/index.vue
View File

@ -1,7 +1,13 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left"> <el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
autocomplete="on"
label-position="left"
>
<div class="title-container"> <div class="title-container">
<h3 class="title">Login Form</h3> <h3 class="title">Login Form</h3>
</div> </div>
@ -21,7 +27,12 @@
/> />
</el-form-item> </el-form-item>
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual> <el-tooltip
v-model="capsTooltip"
content="Caps lock is On"
placement="right"
manual
>
<el-form-item prop="password"> <el-form-item prop="password">
<span class="svg-container"> <span class="svg-container">
<svg-icon icon-class="password" /> <svg-icon icon-class="password" />
@ -40,98 +51,115 @@
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
/> />
<span class="show-pwd" @click="showPwd"> <span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> <svg-icon
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
/>
</span> </span>
</el-form-item> </el-form-item>
</el-tooltip> </el-tooltip>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button> <el-button
:loading="loading"
type="primary"
style="width: 100%; margin-bottom: 30px"
@click.native.prevent="handleLogin"
>Login</el-button
>
<div style="position:relative"> <div style="position: relative" v-if="false">
<div class="tips"> <div class="tips">
<span>Username : admin</span> <span>Username : admin</span>
<span>Password : any</span> <span>Password : any</span>
</div> </div>
<div class="tips"> <div class="tips">
<span style="margin-right:18px;">Username : editor</span> <span style="margin-right: 18px">Username : editor</span>
<span>Password : any</span> <span>Password : any</span>
</div> </div>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true"> <el-button
class="thirdparty-button"
type="primary"
@click="showDialog = true"
>
Or connect with Or connect with
</el-button> </el-button>
</div> </div>
</el-form> </el-form>
<el-dialog title="Or connect with" :visible.sync="showDialog"> <el-dialog title="Or connect with" :visible.sync="showDialog">
Can not be simulated on local, so please combine you own business simulation! ! ! Can not be simulated on local, so please combine you own business
<br> simulation! ! !
<br> <br />
<br> <br />
<br />
<social-sign /> <social-sign />
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { validUsername } from '@/utils/validate' import { validUsername } from "@/utils/validate";
import SocialSign from './components/SocialSignin' import SocialSign from "./components/SocialSignin";
export default { export default {
name: 'Login', name: "Login",
components: { SocialSign }, components: { SocialSign },
data() { data() {
const validateUsername = (rule, value, callback) => { const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) { if (!validUsername(value)) {
callback(new Error('Please enter the correct user name')) callback(new Error("Please enter the correct user name"));
} else { } else {
callback() callback();
} }
} };
const validatePassword = (rule, value, callback) => { const validatePassword = (rule, value, callback) => {
if (value.length < 6) { if (value.length < 6) {
callback(new Error('The password can not be less than 6 digits')) callback(new Error("The password can not be less than 6 digits"));
} else { } else {
callback() callback();
} }
} };
return { return {
loginForm: { loginForm: {
username: 'admin', username: "admin",
password: '111111' password: "111111",
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [
password: [{ required: true, trigger: 'blur', validator: validatePassword }] { required: true, trigger: "blur", validator: validateUsername },
],
password: [
{ required: true, trigger: "blur", validator: validatePassword },
],
}, },
passwordType: 'password', passwordType: "password",
capsTooltip: false, capsTooltip: false,
loading: false, loading: false,
showDialog: false, showDialog: false,
redirect: undefined, redirect: undefined,
otherQuery: {} otherQuery: {},
} };
}, },
watch: { watch: {
$route: { $route: {
handler: function(route) { handler: function (route) {
const query = route.query const query = route.query;
if (query) { if (query) {
this.redirect = query.redirect this.redirect = query.redirect;
this.otherQuery = this.getOtherQuery(query) this.otherQuery = this.getOtherQuery(query);
} }
}, },
immediate: true immediate: true,
} },
}, },
created() { created() {
// window.addEventListener('storage', this.afterQRScan) // window.addEventListener('storage', this.afterQRScan)
}, },
mounted() { mounted() {
if (this.loginForm.username === '') { if (this.loginForm.username === "") {
this.$refs.username.focus() this.$refs.username.focus();
} else if (this.loginForm.password === '') { } else if (this.loginForm.password === "") {
this.$refs.password.focus() this.$refs.password.focus();
} }
}, },
destroyed() { destroyed() {
@ -139,45 +167,49 @@ export default {
}, },
methods: { methods: {
checkCapslock(e) { checkCapslock(e) {
const { key } = e const { key } = e;
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z') this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
}, },
showPwd() { showPwd() {
if (this.passwordType === 'password') { if (this.passwordType === "password") {
this.passwordType = '' this.passwordType = "";
} else { } else {
this.passwordType = 'password' this.passwordType = "password";
} }
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.password.focus() this.$refs.password.focus();
}) });
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
this.loading = true this.loading = true;
this.$store.dispatch('user/login', this.loginForm) this.$store
.dispatch("user/login", this.loginForm)
.then(() => { .then(() => {
this.$router.push({ path: this.redirect || '/', query: this.otherQuery }) this.$router.push({
this.loading = false path: this.redirect || "/",
query: this.otherQuery,
});
this.loading = false;
}) })
.catch(() => { .catch(() => {
this.loading = false this.loading = false;
}) });
} else { } else {
console.log('error submit!!') console.log("error submit!!");
return false return false;
} }
}) });
}, },
getOtherQuery(query) { getOtherQuery(query) {
return Object.keys(query).reduce((acc, cur) => { return Object.keys(query).reduce((acc, cur) => {
if (cur !== 'redirect') { if (cur !== "redirect") {
acc[cur] = query[cur] acc[cur] = query[cur];
} }
return acc return acc;
}, {}) }, {});
} },
// afterQRScan() { // afterQRScan() {
// if (e.key === 'x-admin-oauth-code') { // if (e.key === 'x-admin-oauth-code') {
// const code = getQueryObject(e.newValue) // const code = getQueryObject(e.newValue)
@ -196,16 +228,16 @@ export default {
// } // }
// } // }
// } // }
} },
} };
</script> </script>
<style lang="scss"> <style lang="scss">
/* 修复input 背景不协调 和光标变色 */ /* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#283443; $bg: #283443;
$light_gray:#fff; $light_gray: #fff;
$cursor: #fff; $cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) { @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@ -248,9 +280,9 @@ $cursor: #fff;
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
$bg:#2d3a4b; $bg: #2d3a4b;
$dark_gray:#889aa4; $dark_gray: #889aa4;
$light_gray:#eee; $light_gray: #eee;
.login-container { .login-container {
min-height: 100%; min-height: 100%;