|
@@ -0,0 +1,83 @@
|
|
|
+<template>
|
|
|
+ <div class="admin-login__loginForm">
|
|
|
+ <el-form :model="loginForm" status-icon :rules="loginRules" ref="LoginForm" label-width="100px">
|
|
|
+ <el-form-item label="用户名:" prop="username">
|
|
|
+ <el-input type="text" v-model="loginForm.username"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="密码:" prop="password">
|
|
|
+ <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="admin-login-btns">
|
|
|
+ <el-button class="login-btn__login" type="primary" @click="handleLogin('LoginForm')">登录</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: 'Login',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loginForm: {
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ },
|
|
|
+ loginRules: {
|
|
|
+ username: [
|
|
|
+ { required: true, message: '请输入用户名', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, message: '请输入密码', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleLogin(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log('submit')
|
|
|
+ this.doLogin()
|
|
|
+ } else {
|
|
|
+ console.log('err')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ doLogin() {
|
|
|
+ const opt = this.getOption();
|
|
|
+ console.log('Options: ', opt)
|
|
|
+ },
|
|
|
+ getOption() {
|
|
|
+ const opt = {
|
|
|
+ username: '',
|
|
|
+ password: ''
|
|
|
+ }
|
|
|
+
|
|
|
+ return opt;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+$text_color: #ccc;
|
|
|
+.admin-login {
|
|
|
+ &__loginForm {
|
|
|
+ ::v-deep .el-form-item__label {
|
|
|
+ color: $text_color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-btns {
|
|
|
+ .login-btn {
|
|
|
+ &__login {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|