用ant design vue 写一个电脑端的登录页面
时间: 2023-10-23 15:10:19 浏览: 36
<template>
<div class="login-page">
<a-icon class="logo" type="ant-design" />
<a-form :form="form" class="login-form">
<a-form-item>
<a-input
v-decorator="[
'username',
{ rules: [{ required: true, message: '请输入用户名' }] },
]"
prefix-icon="user"
placeholder="用户名"
/>
</a-form-item>
<a-form-item>
<a-input
v-decorator="[
'password',
{ rules: [{ required: true, message: '请输入密码' }] },
]"
prefix-icon="lock"
type="password"
placeholder="密码"
/>
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" class="login-button">
登录
</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
export default {
name: "LoginPage",
data() {
return {
form: this.$form.createForm(this),
}
},
methods: {
handleSubmit(e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
console.log("Received values of form: ", values)
}
})
},
},
}
</script>
<style scoped>
.login-page {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.logo {
font-size: 64px;
margin-bottom: 24px;
}
.login-form {
width: 300px;
}
.login-button {
width: 100%;
}
</style>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)