使用el-dialog做的登录弹窗
时间: 2023-10-25 11:07:44 浏览: 36
好的,下面是一个简单的示例:
```html
<template>
<div>
<el-button @click="showDialog">登录</el-button>
<el-dialog :visible.sync="dialogVisible" title="登录">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="login">登录</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
loginForm: {
username: '',
password: '',
},
loginRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
],
},
};
},
methods: {
showDialog() {
this.dialogVisible = true;
},
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 发送登录请求
console.log(this.loginForm);
this.dialogVisible = false;
}
});
},
},
};
</script>
```
这里使用了 Element UI 中的 `el-dialog` 组件来实现登录弹窗。其中 `dialogVisible` 控制弹窗的显示与隐藏,`loginForm` 存储用户输入的用户名和密码,`loginRules` 定义了表单的校验规则。
在点击登录按钮时,通过 `this.$refs.loginForm.validate` 方法进行表单校验,如果校验通过,则可以发送登录请求,否则会提示用户输入正确的用户名和密码。
希望这个示例能够帮到你。