Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
FLIPPED-AURORA
gin-vue-admin
提交
34d4af7b
G
gin-vue-admin
项目概览
FLIPPED-AURORA
/
gin-vue-admin
大约 1 年 前同步成功
通知
337
Star
18155
Fork
5506
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
34d4af7b
编写于
4月 26, 2020
作者:
G
Granty1
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add 'enter' event for login & format login.vue
上级
69742b93
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
70 addition
and
52 deletion
+70
-52
web/src/view/login/login.vue
web/src/view/login/login.vue
+70
-52
未找到文件。
web/src/view/login/login.vue
浏览文件 @
34d4af7b
...
...
@@ -3,19 +3,31 @@
<vue-particle-line></vue-particle-line>
<el-main
class=
"login-box"
>
<h1
class=
"title-1"
>
<img
class=
"logo"
:src=
"require('@/assets/logo.png')"
alt=
""
srcset=
""
>
<img
class=
"logo"
:src=
"require('@/assets/logo.png')"
alt=
""
srcset=
""
/>
</h1>
<el-form
:model=
"loginForm"
:rules=
"rules"
ref=
"loginForm"
>
<el-form
:model=
"loginForm"
:rules=
"rules"
ref=
"loginForm"
@
keyup.enter.native=
"submitForm"
>
<el-form-item
prop=
"username"
>
<el-input
placeholder=
"请输入用户名"
v-model=
"loginForm.username"
></el-input>
<el-input
placeholder=
"请输入用户名"
v-model=
"loginForm.username"
></el-input>
</el-form-item>
<el-form-item
prop=
"password"
>
<el-input
:type=
"lock
==='lock'?'password':
'text'"
:type=
"lock
=== 'lock' ? 'password' :
'text'"
placeholder=
"请输入密码"
v-model=
"loginForm.password"
>
<i
:class=
"'el-input__icon el-icon-' + lock"
@
click=
"changeLock"
slot=
"suffix"
></i>
<i
:class=
"'el-input__icon el-icon-' + lock"
@
click=
"changeLock"
slot=
"suffix"
></i>
</el-input>
</el-form-item>
<el-form-item
style=
"position:relative"
>
...
...
@@ -25,7 +37,13 @@
placeholder=
"请输入验证码"
maxlength=
"10"
/>
<img
v-if=
"picPath"
:src=
"path + picPath"
alt=
"请输入验证码"
@
click=
"loginVefify()"
class=
"vPic"
>
<img
v-if=
"picPath"
:src=
"path + picPath"
alt=
"请输入验证码"
@
click=
"loginVefify()"
class=
"vPic"
/>
</el-form-item>
<el-form-item>
<el-button
@
click=
"submitForm"
style=
"width:100%"
>
登 录
</el-button>
...
...
@@ -37,79 +55,79 @@
</
template
>
<
script
>
import
{
mapActions
}
from
'
vuex
'
import
{
captcha
}
from
'
@/api/user
'
const
path
=
process
.
env
.
VUE_APP_BASE_API
import
{
mapActions
}
from
"
vuex
"
;
import
{
captcha
}
from
"
@/api/user
"
;
const
path
=
process
.
env
.
VUE_APP_BASE_API
;
export
default
{
name
:
'
Login
'
,
name
:
"
Login
"
,
data
()
{
const
checkUsername
=
(
rule
,
value
,
callback
)
=>
{
if
(
value
.
length
<
5
||
value
.
length
>
12
)
{
return
callback
(
new
Error
(
'
请输入正确的用户名
'
))
return
callback
(
new
Error
(
"
请输入正确的用户名
"
));
}
else
{
callback
()
callback
()
;
}
}
}
;
const
checkPassword
=
(
rule
,
value
,
callback
)
=>
{
if
(
value
.
length
<
6
||
value
.
length
>
12
)
{
return
callback
(
new
Error
(
'
请输入正确的密码
'
))
return
callback
(
new
Error
(
"
请输入正确的密码
"
));
}
else
{
callback
()
callback
()
;
}
}
}
;
return
{
lock
:
'
lock
'
,
lock
:
"
lock
"
,
loginForm
:
{
username
:
''
,
password
:
''
,
captcha
:
''
,
captchaId
:
''
,
username
:
""
,
password
:
""
,
captcha
:
""
,
captchaId
:
""
,
},
rules
:
{
username
:
[{
validator
:
checkUsername
,
trigger
:
'
blur
'
}],
password
:
[{
validator
:
checkPassword
,
trigger
:
'
blur
'
}]
username
:
[{
validator
:
checkUsername
,
trigger
:
"
blur
"
}],
password
:
[{
validator
:
checkPassword
,
trigger
:
"
blur
"
}],
},
path
:
path
,
logVerify
:
''
,
picPath
:
''
}
path
:
path
,
logVerify
:
""
,
picPath
:
""
,
}
;
},
created
()
{
this
.
loginVefify
()
this
.
loginVefify
()
;
},
methods
:
{
...
mapActions
(
'
user
'
,
[
'
LoginIn
'
]),
...
mapActions
(
"
user
"
,
[
"
LoginIn
"
]),
async
login
()
{
await
this
.
LoginIn
(
this
.
loginForm
)
await
this
.
LoginIn
(
this
.
loginForm
)
;
},
async
submitForm
()
{
this
.
$refs
.
loginForm
.
validate
(
async
v
=>
{
this
.
$refs
.
loginForm
.
validate
(
async
(
v
)
=>
{
if
(
v
)
{
this
.
login
()
this
.
loginVefify
()
this
.
login
()
;
this
.
loginVefify
()
;
}
else
{
this
.
$message
({
type
:
'
error
'
,
message
:
'
请正确填写登录信息
'
,
showClose
:
true
})
this
.
loginVefify
()
return
false
type
:
"
error
"
,
message
:
"
请正确填写登录信息
"
,
showClose
:
true
,
})
;
this
.
loginVefify
()
;
return
false
;
}
})
})
;
},
changeLock
()
{
this
.
lock
===
'
lock
'
?
(
this
.
lock
=
'
unlock
'
)
:
(
this
.
lock
=
'
lock
'
)
this
.
lock
===
"
lock
"
?
(
this
.
lock
=
"
unlock
"
)
:
(
this
.
lock
=
"
lock
"
);
},
loginVefify
()
{
captcha
({}).
then
(
ele
=>
{
this
.
picPath
=
ele
.
data
.
picPath
this
.
loginForm
.
captchaId
=
ele
.
data
.
captchaId
})
}
}
}
captcha
({}).
then
(
(
ele
)
=>
{
this
.
picPath
=
ele
.
data
.
picPath
;
this
.
loginForm
.
captchaId
=
ele
.
data
.
captchaId
;
})
;
}
,
}
,
}
;
</
script
>
<
style
scoped
lang=
"scss"
>
...
...
@@ -121,16 +139,16 @@ export default {
position
:
absolute
;
left
:
50%
;
margin-left
:
-22vw
;
top
:
5vh
;
.logo
{
top
:
5vh
;
.logo
{
height
:
35vh
;
width
:
35vh
;
}
}
.vPic
{
.vPic
{
position
:
absolute
;
right
:
10px
;
bottom
:
0px
;
// 适配ie
bottom
:
0px
;
// 适配ie
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录