element-ui的使用（一）

一、安装与引入

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>