<template>
<div class="login">
<Form ref="formRef" :model="loginForm" :rules="formRule" class="form">
<FormItem prop="user">
<Input type="text" v-model="loginForm.user" placeholder="请输入用户名">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem prop="password">
<Input type="password" password v-model="loginForm.password" placeholder="请输入密码">
<Icon type="ios-lock-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem>
<Button type="primary" @click="login">登录</Button>
<Button type="default" @click="reset">重置</Button>
</FormItem>
</Form>
</div>
</template>
<script>
export default{
data(){
return{
loginForm:{
user:'',
password:''
},
formRule:{
user:[
{required:true, message:'请输入用户名', trigger: 'blur'}
],
password:[
{required:true, message:'请输入密码', trigger:'blur' },
{min:3, max:10, message:'密码长度在3-10之间' ,trigger:'blur'}
]
}
}
},
methods:{
login(){
this.$refs.formRef.validate((valid) => {
if(valid){
window.sessionStorage.setItem('token','login-token')
const tokenlo = sessionStorage.getItem('token')
console.log(tokenlo)
this.$Message.success('登录成功')
// this.$router.push('/test')
}else{
this.$Message.error('登录失败')
}
})
},
reset(){
this.$refs.formRef.resetFields()
}
}
}
</script>
<style scoped>
.login{ 400px;height: 200px;background: #fafafa;margin: 10px auto;}
.form{display: flex;flex-direction: column;padding: 30px;}
</style>