一:安装及引入

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布局方式对比
条目BootStrapElementUI
栅格布局的行和列
<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,且以百分比出现

Logo

前往低代码交流专区

更多推荐