用antdeaignvue 写一个登录页面代码
时间: 2024-05-13 22:15:14 浏览: 15
以下是一个使用 ant-design-vue 实现的登录页面的示例代码:
```
<template>
<a-form ref="loginForm" :model="loginForm" :rules="loginFormRules" :noColon="true" @submit.prevent="login">
<a-form-item label="用户名" :colon="false" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" prop="username">
<a-input v-model="loginForm.username" placeholder="请输入用户名" />
</a-form-item>
<a-form-item label="密码" :colon="false" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" prop="password">
<a-input v-model="loginForm.password" type="password" placeholder="请输入密码" />
</a-form-item>
<a-form-item :wrapper-col="{ offset: 6 }">
<a-button type="primary" html-type="submit">登录</a-button>
</a-form-item>
</a-form>
</template>
<script>
import { Form, Input, Button, message } from 'ant-design-vue';
export default {
name: 'Login',
components: {
'a-form': Form,
'a-form-item': Form.Item,
'a-input': Input,
'a-button': Button
},
data() {
return {
loginForm: {
username: '',
password: ''
},
loginFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
};
},
methods: {
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 在这里编写登录逻辑
message.success('登录成功');
}
});
}
}
};
</script>
```
该代码使用了 ant-design-vue 的 Form、Input、Button 等组件,实现了一个基本的登录页面。其中,使用了 Form 组件的校验功能,通过设置对应的规则,可以对表单进行校验。在登录方法中,通过 this.$refs.loginForm.validate() 方法,对表单进行校验,如果校验通过,则执行登录逻辑。在这个示例中,登录逻辑部分被省略了,只是简单地弹出了一个登录成功的提示框。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)