首先谈谈ElementUi

网址：element.eleme.cn/ 对ElenmetUi有了解的同学都知道，这个插件库提供了一套前端常用的控件组件。其内容十分丰富：

Base栏：用于宏观布局
Form栏：表单的各种控件
Data栏：数据直观显示的控件
Notice栏：友好交互的提醒控件
Navigation栏：本身也属于布局的一种
Others栏：一些零碎的实用组件

ElementUi的安装

安装：

1.推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S 2. 引入样式 link rel="stylesheet" href="unpkg.com/element-ui/…" 引入组件库 script src="unpkg.com/element-ui/…"

主题颜色

官网有详细解释，在此不做赘述

内置过度动画

此插件实战比较常用

组件

组件类型比较丰富，而且内容能够满足日常开发需求

详细的控件状态，日常开发几乎都能满足：

而且控件展示下面都会有详细的参数配置如图：

笔者推荐使用的控件

1. Upload上传控件

此控件支持显示的类型可以自己调控，但是也有一些诟病。就是上传的action中会有延迟，解决方法网上有很多，比如直接使用组件提供的:before-upload而抛弃action。除去这些此控件还是很好用的，用户反馈良好

2. 表单控件

（1）常用的日期时间选择器：

ElementUi提供了美观的Ui样式如图：

以及日期范围选择如下图：

你可以选择是关联两个日期的时间等操作。同样的，此控件也有些诟病，比如在手机端显示的时候，没法自动缩小比例显示，有的甚至只显示结束日期的Ui,所以移动端还请注意。

**需要注意的是如果真想使用表单，需要加入表单控件。如下图代码：**

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="formInline.region" placeholder="活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

笔者心得体会

如果不去修改此控件的内容，例如样式等，ElementUi还是个很好的插件库，如果有需要修改的地方，也只能根据官网控件下面提供的参数，方法自定义设置。但使用下来其实有的官网展示的参数会有部分不起作用。而且可修改的内容也不是很多，控件可能自带背景颜色，如果需要修改则是让人头疼的问题，所以此插件有利有弊。

那就分享到这了，谢谢大家

基于vue开发的插件-ElementUI实践体会