共计 5354 个字符，预计需要花费 14 分钟才能阅读完成。
一、装置与引入
element-ui 的官网文档:https://element.eleme.cn/#/zh…
首先，咱们在终端中输出npm i element-ui -S，就能够把 element-ui 下载下来，之后，须要在 main.js 我的项目入口文件中引入 element-ui, 留神，这里有两种抉择：
- 第一就是全盘引入
import Element-UI from 'element-ui' - 第二种就是按需引入，比如说你须要用到 Button, 那么你就
import {Button} from 'element-ui'
留神咱们之前引入的只是 element-ui 的组件，然而具体的款式还没有引入，因而须要加上
import 'element-ui/lib/theme-chalk/index.css', 这个是容易被疏忽的中央，须要强调。
之后还须要申明一下 Vue.use(Element-UI), 这样咱们才能够在 vue 的其余组件中应用
集体还是比拟举荐按需引入，毕竟咱们的我的项目中不会把 element-ui 的全副组件都会用到，只可能最多十几种，所以为了整个我的项目，还是按需引入的好一些
二、配合 Vue 制作登录界面
1. 引入 el-form 表单
el-form 有很多种，然而我的需要是用户登录，那么只须要两个 input 文本框就好。我间接援用的是官网组件中 Form 表单的“自定义校验规定”, 这个用着不便些。
大抵代码如下，简略的账户和明码验证：
<template>
<div class="home">
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="账号" prop="username">
<el-input
type="text"
v-model="ruleForm.username"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="明码" prop="Pass">
<el-input
type="password"
v-model="ruleForm.Pass"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
> 提交 </el-button
>
<el-button @click="resetForm('ruleForm')"> 重置 </el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {data() {var validateUser = (rule, value, callback) => {if (value === "") {callback(new Error("请输出账号"));
} else {callback();
}
};
var validatePass = (rule, value, callback) => {if (value === "") {callback(new Error("请输出明码"));
} else {callback();
}
};
return {
ruleForm: {
username: "",
Pass: "",
},
rules: {username: [{ validator: validateUser, trigger: "blur"}],
Pass: [{validator: validatePass, 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>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-input>>> .el-input__inner{width: 10%;}
</style>
这外面有几个问题须要提前说一下：首先最重要就是咱们在援用 elment-ui 的组件时，应用款式都是默认的，咱们能够批改，然而不能够间接在 element-ui 的默认款式文件 index.css 中批改，而是利用到了 深度选择器 进行款式重写，向下看 …
2. 款式重写
款式重写中波及到的重点就是深度选择器，那咱们来具体聊聊深度选择器.
首先，vue 与 Element-ui 兼容性很好，然而 Element-ui 用起来款式无限，所以咱们必须对其外部的 css 进行肯定的笼罩去更改它。
我用 el-input 输入框中的多行文本框的时候
<el-input
v-model="input"
rows="15"
:type="textarea"
></el-input>发现字体始终为宋体且字号很小。于是我加了
<el-input
v-model="input"
rows="15"
:type="textarea"
style="font-size:20px;font-family:'Microsoft YaHei'"
></el-input>仍然没有任何变动。
起初想到去笼罩 input 默认 css 款式。我关上了 node_modules，找到_element-ui@1.4.13@element-ui，点进去关上 lib 文件夹下 theme-default 中的 input.css，这是 el-input 默认款式，ctrl+ F 搜寻 font-size，找到了 el-textarea__inner
这个外面有默认的 font-size:14px; 然而不能在这下面进行批改。所以回到你的我的项目网页。增加如下内容：
<style>
.el-textarea__inner{
font-family:"Microsoft";
font-size:20px;
}
</style>进行笼罩即可，下面控件也不必额定加 class 润饰。对于单行文本框也能够这样进行批改, 退出 el-input__inner{}即可。
最初，如果进行上述批改，会发现其余页面的款式也同时会被批改，这个时候须要用 scoped 和 >>> 符号 进行穿透。
css 外面写
<style scoped>
.textarea >>> .el-textarea__inner{
<!--!important 指明优先级，最好加上。-->
font-family:"Microsoft" !important;
font-size:20px !important;
}
</style>3. 欠缺登录验证
首先保障后盾服务器须要连贯数据库，并且是运行状态
咱们在验证表单的时候，也就是登录的用户名和明码，除了要合乎前端定制的最根本的填写要求，还要保障和服务器内存储的数据雷同，也就是须要将咱们填写的用户名和明码组成提交给服务器，由服务器来判断并返回具体的 status 状态码，如果是 200 代表胜利，否则，失败
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区域 -->
<div class="avatar_box">
<img src="../assets/logo.png" alt="">
</div>
<!-- 登录表单区域 -->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<!-- 用户名 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!-- 明码 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btns">
<el-button type="primary" @click="login"> 登录 </el-button>
<el-button type="info" @click="resetLoginForm"> 重置 </el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {data() {
return {
// 这是登录表单的数据绑定对象 admin 123456
loginForm: {
username: '',
password: ''
},
// 这是表单的验证规定对象
loginFormRules: {
// 验证用户名是否非法
username: [{ required: true, message: '请输出登录名称', trigger: 'blur'},
{min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
],
// 验证明码是否非法
password: [{ required: true, message: '请输出登录明码', trigger: 'blur'},
{min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
]
}
}
},
methods: {
// 点击重置按钮，重置登录表单
resetLoginForm() {// console.log(this);
this.$refs.loginFormRef.resetFields()},
login() {
this.$refs.loginFormRef.validate(async valid => {if (!valid) return
const {data: res} = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200) return this.$message.error('登录失败！')
this.$message.success('登录胜利')
// 1. 将登录胜利之后的 token，保留到客户端的 sessionStorage 中
// 1.1 我的项目中出了登录之外的其余 API 接口，必须在登录之后能力拜访
// 1.2 token 只应在以后网站关上期间失效，所以将 token 保留在 sessionStorage 中
window.sessionStorage.setItem('token', res.data.token)
// 2. 通过编程式导航跳转到后盾主页，路由地址是 /home
this.$router.push('/home')
})
}
}
}
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.avatar_box {
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
display: flex;
justify-content: flex-end;
}
</style>
