element-ui组件学习

element-ui组件的大致分类

element-ui的组件大致分为以下几类：

• Basic
• Form
• Data
• Notice
• Navigation
• Other

组件分类的大致意思

• basic组件类型

  是一些关于页面布局、按钮和icon等相关类型的组件。

  关于布局方面有Layout栅格布局和Container布局容器等等

  Layout布局：

Container容器布局：

• form组件类型

  form包含了所有与表单相关的组件

  比如Upload上传组件

• data组件类型

  data组件类型是展示数据的显示方式

  data组件类型中的Table组件，是以table表格的形式将数据显示出来

还比如data组件类型中的Tree树形控件，就是将数据以树状的形态展示出来，结构清晰明了。

• Notice组件类型

  该组件类型主要是给用户一些提示信息。

  比如Alert警告、Loading加载、Message消息提示、MessageBox弹框以及Notification通知。

  前面两个都是使用html标签的形式经行展示。后面的三种都是通过调用API的形式进行展示

  使用html标签形式经行展示：

  <el-alert
      title="成功提示的文案"
      type="success">
    </el-alert>
  

调用API进行展示：

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

• Navigation组件类型

  为网站提供导航功能的菜单

  一般有NavMenu导航菜单、BreadMenu面包屑导航等这些组件

  NavMenu效果展示：
  

  BreadMenu效果展示：

• Others组件类型

  用的比较多的就是Dialog对话框和Tootip文字提示

  Dialog对话框就是不用多说，就是一个卡片视图的对话框。

  至于Tootip的效果就是当鼠标放在某个元素上时，会出现一个小的提示框，对这个元素经行一些提示

  Dialog对话框：

  

  Tootip提示box：

element-ui中有的组件需要注意的点

• MessageBox弹框

  如上面所说的，MessageBox弹框是一种使用API方式进行调用的组件。具体的代码如下：

  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
  

  以上是官方提供的源代码，但是当我学习了async/await这种解决异步问题的语法之后，我们要对这个promise的API进行改造：

  // 在前面要对调用该API的函数前加上async
  
  const resultStr = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)
  // 注意后面一定要加上捕获错误的函数catch，否则调用时会出错
  // 这个promise对象会返回两个字符串值，cancel和confirm。
  // 可以根据返回值做之后的逻辑处理
  if(resultStr===confirm){
      ...
  }else if(resultStr===cancel){
      ...
  }
  

• Upload上传

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

注意：这里的Upload有一个坑，就是在上传的时候没有调用自己本地设置的axios请求拦截器。

一般axios请求拦截器会设置一项携带token的设置，但是Upload组件并不会使用拦截器，而是在封装的时候调用自己内部的设置

所以要使用Upload本身的一个属性，来使这个组件携带token值 ===> headers属性，接收一个对象

<el-upload :headers=''headersObj>
 
</el-upload>

data(){
    return {
        headersObj:{
            Authorization:window.sessionStorage.getItem('token)
        }
    }
}