关于Vue组件库ElementUI使用过程中踩过的那些坑

一：安装及引入

1.1安装

方式一：用CDN引入

<!-- 引入样式 -->

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

方式二：使用npm安装

npm i element-ui -S

1.2引入

如果使用方式一安装，则不再需要引入

如果使用方式二安装，则在main.js文件中引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; //坑一
Vue.use(ElementUI);

坑一：需要单独引入样式文件 但是elementUI有两个版本，因此在引入theme-chalk/index.css文件时可能会报找不到这个文件

解决办法：引入default-chalk/index.css

弊端：一些elementUI2.0中的样式或是属性不能使用，注意有一些elementUI版本中的属性需要严格区分，下面会详细叙述。

二：布局

elementUI中布局方式可以类比于BootStrap中的布局方式来使用。

BootStrap和ElementUI布局方式对比

条目	BootStrap	ElementUI
栅格布局的行和列	<div class="container"> <div class="row"> <div class="col-*-x"></div> <div class="col-*-x"></div> </div> </div> *可取 lg md sm xs x可取 1 2 3 4 6 9 12 列偏移为col-*-offset-x(*只能为md) 行和列可以任意嵌套	<el-row></el-row>//行 <el-col></el-col>//列 行和列可以任意嵌套 用:span表示 且分格为24(*为0到24的任意数字) <el-row :gutter='*'> <el-col :span='*'></el-col> <el-col :span='*' :offset="*"></el-col> </el-row> gutter为一行分多列时的间距 默认为0 ，即会紧挨 :offset为偏移量 通常不会使用 type为flex中包括justify（水平）和align（垂直）
响应式布局	1.基本布局规则如上 2.媒体查询--不同的屏幕大小下，使用不同的css样式 /* 超小设备（手机，小于 768px） */ /* Bootstrap 中默认情况下没有媒体查询 */ /* 小型设备（平板电脑，768px 起） */ @media (min-width: @screen-sm-min) {css样式 } /* 中型设备（台式电脑，992px 起） */ @media (min-width: @screen-md-min) { css样式} /* 大型设备（大台式电脑，1200px 起） */ @media (min-width: @screen-lg-min) { css样式}	取值为xs sm md lg xl 一行总和相加还是要为24

三：基本组件

3.1图标

通常不使用elementUI的图标，可以使用阿里云图标库 使用说明在技术胖将vue的视频中有说明

3.2Button

3.2.1基本的按钮属性

1.type：primary（蓝色） / success （绿色）/ warning （黄色）/ danger（红色） / info （灰色）/ text（文本）

2.样式：type（类型），plain（朴素），round（方角），circle（圆角），disabled（不可点击）

notices：除了type以外其余都去boolean类型的值，默认为false

3.size：medium / small / mini

notices：通常只能改变高度，不能改变宽度，因此在使用的时候一般都是给medium

4.icon属性为图标，<el-button-group></el-button-group>为按钮组

四：那些遇到的坑们

1.select框

1.问题：宽度没有办法改变

解决办法：一定要给select框的外面加尺寸，不能在form元素或是其他的地方加尺寸，没有什么作用。

2.datePicker日期选择器

1.问题：想要限制某一个时间段内的时间 比如只能选择1900年1月1日到2100年12月31日之间的时间段

解决：使用pickerOptions属性

template：（editable为是否可输入）

<el-date-picker v-model="timePicker" style="width:100%;" :picker-options="pickerOptions" :editable='edit'></el-date-picker>

data：

data(){
return{
timePicker:'',
 pickerOptions:{
  disabledDate(time) {
     let min=time.getTime() < new Date("1900/1/1");
      let max=time.getTime() > new Date("2099/12/31");
       return min||max;
 }
  },
edit:false,
}
}

2.问题：（衍生出来的时间问题）在使用getFullYear()等和时间相关的函数时，报错如下：

"TypeError: ds.getFullYear is not a function"

解决：getFullYear()等函数的调用对象必须为object（即ds的对象必须时object）因此需要

var d=new Date（ds）;
console.log(d.getFullYear());

显然是因为getFullYear一类的时间函数的原型写法为

Object.getFullYear=function(){
//对object的处理
return 年
};

3.注意和Boolean类型相关的值需要在data里面给一个值，不能直接在元素里以editable=false或是editable='false'的形式给它

3.Upload文件上传

1.问题：判断上传之前的格式

解决：给<el-upload></el-upload>标签加上before-upload属性

<template>
<el-upload
:before-upload='beforeUpload'>
<el-button size="middle" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
methods:{
beforeUpload(file){
//file.type为文档类型
            console.log(file.type);
           }
}
</script>

4.form表单

1.input框输入密码或是其他和HTML5中一样，只需要改变type即可

5.pagination分页

1.问题：重置以后恢复分页的初始状态

解决：将需要的当前页和页面大小在改变的过程中传递，而不是传一个死的，传一个死的再改变，它有可能不会改变。

<template>
<el-pagination
 @size-change="handleSizeChange"
//这是页面大小切换时候的函数
 @current-change="handleCurrentChange"
//这是当前页切换的函数
:current-page="form.page"
//当前页
:page-sizes="[10,20,50,100,200]"
//页面数组
:page-size="form.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalPage">
            </el-pagination>
</template>
<script>
data(){
return{
form:{
page:1,
pageSize:10,
},
totalPage:0,
},
methods:{
handleSizeChange(val){
//val为目前选择的页面大小
},
handleCurrentChange(val){
//val为目前选择的当前页
}
}
}
</script>

6.NavMenu导航栏菜单

1.问题：多个导航栏菜单，el-menu-item打开时，el-submenu不会关闭

解决：调用el-menu的关闭el-submenu的函数

步骤：1.如果点击的是el-submenu，就获取它的唯一索引 index

<el-menu @open="handleOpen" ref=‘menu’>//必须要给ref属性，方便后面调用函数
<el-submenu></el-submenu>
<el-menu-item></el-submenu-item>
</el-menu>
handleOpen(key,path){
//key即为需要的唯一索引

this.key=key;
}

    2.点击的是el-menu-item，就调用前面存储的唯一索引所对应的关闭函数，并注意情况存唯一索引的变量的值,注意el-submenu关闭的时候也要清空key

showIndex(){
          if(this.key!=''){
              this.$refs.menu.close(this.key);
              this.key='';
          }

2.收起的时候可能会出现字体的卡顿

这是element UI本身组件的问题，没有办法解决，可以给一个优化方案为给标题一个margin或者padding。

7.dialog对话框

1.问题：size属性不再起作用（tiny，small，middle，large）

换成width，且以百分比出现