Element

1.什么是Element?如何使用？

//就是个组件案例库，展示各种案例，你需要用到的时候就直接复制代码，进行展示。

//要使用其中组件时，复制组件的代码到项目中，然后在element.js文件中按需导入
//引入
import { Button ,Form, FormItem ,Input,Message,Container,Header,Aside,Main} from 'element-ui'
//安装
Vue.use(Button)
Vue.use(FormItem)
Vue.use(Form)
Vue.use(Input)

是什么：是大佬制作的样式集合网站，需要的样式就直接复制代码带调用，不需要自己手写了 手动安装： npm安装--main.js里引入--配置

使用方法： 在官网找到需要的样式--显示代码+复制代码--创建子组件将代码粘贴进去--父组件调用即可

2.如何使用Element图标库没有的图标

ps：Vue-shop项目中输入框的icon就用到过

如何单个导入要使用阿里图标

导入多个图标的方法：
1.从阿里图标库挑选3个图标后，添加至项目，在项目中选择第二种使用方法：Font Class，下载至本地
2.将下载的整个文件解压到项目的css文件夹下
3.在main.js引入iconfont.css文件即可
4.在阿里项目中查看图标引入名：icon-dingdanguanli

//引入多个阿里图标
import './assets/css/fonts/iconfont.css'

3.表单的数据绑定

//双向绑定对象：data数据  和   输入框展示内容
//流程：当输入框值改变时就会改变data里的数据值，反之当data里的数据值改变的话就会改变输入框里的展示值
//：model动态绑定data里的form对象，将form数据输入进去
//v-model=“form.name”绑定data数据form对象里的name属性
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
</el-form>

<script>
  export default {
    data() {
      return {
        form: {
          name: '',
        }
      }
    }
  }
</script>

4.表单的数据验证

//动态绑定：rules=data数据里的验证规则对象formrulse

//制定验证规则：
required：定义字段是否可以为空（true表示不可以）；
message:验证失败后会输出提醒信息message；
trigger：blur：失去焦点时触发验证；
min，max：输入的字符长度限制

//prop=‘username’  ：prop 属性让你的校验规则和数据进行匹配

<el-form :model="ruleForm" :rules="formrules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>

<script>
  export default {
    data() {
      return {
        form: {
          username: '',
        }，
        //制定规则
        formrules：{  
            username:[  //数组形式，储存对象
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ]
        }
      }
    }
  }
</script>

5.重置按钮：使用Element内置函数

查看重置函数的解释：element里表单组件那里，一直下拉就能看到内置的函数Form Mehtods，这里解释了所有被用到的函数解析

业务逻辑：点击重置按钮后--触发点击函数：重置函数--获取组件--让组件执行Element的内置函数：重置函数--完成

//因为Element的内置函数.resetFields()是对整个组件其效果，所以需要获取整个组件el-form，用ref获取，所以先命名ref
//绑定点击事件

 <el-form  ref="loginFormRef">
 ...
  <el-button type="primary" @click="resetLoginForm">重置</el-button>
 </el-form>
 
methods:{
    //重置表单：点击
    resetLoginForm(){
      //console.log(this)查看this里的ref，知道从哪里拿取组件
      //获取组件loginFormRef，并执行Element内置的重置函数resetFields()
      this.$refs.loginFormRef.resetFields()
    }
  }

6.表单预验证

什么是预验证？

输入密码账号后，如果密码账号的位数都没达到规定字符值，就直接去服务器请求比较数据，这样我们不用想都返回的是不存在，所以徒增的是一段请求时间和请求行为。

但是如果我们设置了预验证：当密码账号的位数都对的时候才去服务器对比数据post，这样就减少了请求次数和无效的请求行为。

案例1：登录页面的预验证和验证提交：

//1.组件书写
<!--用户名的输入框-->
<el-form-item prop="username">  //prop指代的是被验证的对象
    <el-input class="login_input" v-model="loginForm.username">  //双向绑定输入框的值和data的数据变量
       <i slot="prefix" class="iconfont icon-yonghu"></i>
    </el-input>
</el-form-item>
<!--密码的输入框-->
<el-form-item prop="password">
  <el-input v-model="loginForm.password" type="password">
     <i slot="prefix" class="iconfont icon-password"></i>
  </el-input>
</el-form-item>

//2.在data创建空对象、并且设置表单验证规则
 data () {
    return {
      //这是登陆数据表单的绑定对象:如果数据填入值，就是默认值
      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'
          }
        ]
      }
    }
//3.预验证结束后的提交判断：使用Element里的内置函数.validate（）来预验证完成返回一个布尔值（需要获取整个表单组件el-menu）
//给登录按钮设置点击事件：validate进行预验证完毕后返回值，根据这个值判断书写是否符合规则，不符合就输出消息，成功就提交到后台
 <el-button type="primary" @click="login">登录</el-button>
 methods: {
    //点击登录事件：预验证
    login () {
      this.$refs.loginFormRef.validate( valid => {
        console.log(valid)  //返回值valid是个布尔值
        if (valid) {   //valid为true时执行
            alert('submit!');    //弹出信息框：提交
          } else {
            console.log('error submit!!');  //输出信息：提交错误
            return false;
        }
      })
    },

6.2自定义规则预验证：

案例2：邮箱手机号的自定义验证规则

1.邮箱和手机号的验证方法需要额外自定义设置规则，因为这两个比较复杂，只用min和max表示已经不能完全验证，需要使用正则表达式进行验证。使用element的自定义验证表单规则组件：查看源代码
2.流程：在data函数创建两个变量函数--变量函数的功能是用于指定规则并进行验证实参是否符合规则--在表单验证规则里设置：调用验证函数

//在return上面声明变量=函数
 data () {
    //自定义验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      //正则表达式：规则
      const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]))+/
      //判断：如果输入的值符合规则，那么返回回调函数callback
      //使用test测试value值是否符合regEmail规定的规则
      if (regEmail.test(value)) {
        return cb()
      }
      //判断：如果不符合规则，那么弹出提示消息：请输入正确的邮箱格式
      cb(new Error('请输入合法的邮箱'))
    }
  //在return里指定验证规则
  return {
    //添加用户的表单预验证规则
      addFormRules: {
        //验证邮箱
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            //验证方式：调用验证函数checkEmail（）
            validator: checkEmail,
            trigger: 'blur'
          }
        ],
   }
}

7.Element的标签名就是一个class选择器

组件 <el-header> </el-header>的 el-header本身就是个class选择器名，可以直接设置样式：

<style scoped>
.el-header{
  background-color: #373d41;
}
</style>

8.Element整体布局组件

后台管理项目的整体布局是：头部--侧边栏--右侧内容区

在Element中找到相同布局时，直接复制代码使用即可，然后完善css样式

9.遇到内置的css时如何去除？

1.当我们需要去掉一个元素的border时，如何去除？
2.因为这个border是在element内置的，所以我们们去除时在自己项目找不到，可以使用css的覆盖性来覆盖掉原先的
3.重写.el-menu{boredr：none}