element-plus写登陆界面
时间: 2023-10-24 14:20:16 浏览: 12
要使用 Element Plus 创建一个登录界面,可以使用以下步骤:
1. 导入 Element Plus 组件库:
```js
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
```
2. 在模板中使用组件:
```html
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</template>
```
3. 在脚本中添加表单验证和提交方法:
```js
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
export default {
setup() {
const form = ref({
username: '',
password: ''
});
const submitForm = () => {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,执行登录操作
console.log('登录成功!');
} else {
// 表单验证失败,提示错误信息
ElMessage.error('请输入用户名和密码!');
}
});
};
return {
form,
submitForm
};
}
};
```
这样就可以创建一个简单的登录界面了。需要注意的是,以上代码只是一个示例,具体实现需要根据实际需求进行修改。
阅读全文