使用ElementUI的Form 组件
(1)首先必须是项目中安装ElementUI库 (2)引入Vue的项目中 (3)引入对应的组件名称并且全局注册
ElementUI 安装
npm i element-ui -S
引入 Element
main.js 内容添加
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);
使用 Form 组件
布局标签:
<el-form class="loginForm" label-position="left"
label-width="0px" :model="loginForm"
:rules="loginFormRules"
ref="loginFormRef">
<h3 class="loginTitle">系统登录</h3>
<el-form-item prop="username">
<el-input prefix-icon="fas fa-user" type="text" v-model="loginForm.username"
auto-complete="off" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input prefix-icon="fas fa-lock" type="password" v-model="loginForm.password"
auto-complete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button type="primary" style="width: 100%;background: #505458;border: none"
v-on:click="login">登录</el-button>
</el-form-item>
</el-form>
表单验证
// 用户登录
login() {
// 登录前校验
this.$refs.loginFormRef.validate(valid => {
if (!valid) return
// todo 校验通过
this.$message.success('执行登录操作')
})
}
// 表单校验规则,trigger指定什么时候触发校验
loginFormRules: {
username: [
{ required: true, message: '请输入账号', trigger: 'blur' },
{
min: 4,
max: 20,
message: '账号长度在 4 到 20 个字符',
trigger: 'blur'
}
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6,
max: 15,
message: '密码长度在 6 到 15 个字符',
trigger: 'blur'
}
]
},
使用样式css
在public 文件增加 css/login.css ,内容如下:
.loginForm {
border-radius: 15px;
background-clip: padding-box;
margin: 90px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
Login.vue 引入 login.css。
<style>
@import "../assets/css/login.css";
</style>
界面展示效果:
标签:Form,ElementUI,trigger,blur,组件,message,css From: https://www.cnblogs.com/mahmud/p/16871089.html