1.main.js引入elementui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
2.实际效果
3.代码
<template>
<div class="login-box">
<div class="welcome">欢迎登录</div>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
<el-form-item label="账号" prop="account">
<el-input type="text" v-model="ruleForm.account" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button class="sub_submit" type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
ruleForm: {
account: '',
password: ''
},
rules: {
account: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<!--
npm install sass-loader -D
npm install node-sass -D
-->
<style lang="scss" scoped>
.login-box {
padding: 20px;
margin: 150px auto; /*居中*/
box-shadow: 0 0 30px #d9d6c3; /*阴影*/
border: 1px solid #d9d6c3; /*div边框*/
border-radius: 5px;
width: 400px;
}
.welcome {
position: relative;
margin-left: 30%;
padding: 20px;
text-shadow: 0 0 10px #d9d6c3;
font-size: 25px;
}
.sub_submit{
margin-left: 20%;
}
</style>