ElementUI使用笔记
最近实习的过程中第一次使用了ElementUI这个框架来快速开发项目的页面，在这个过程中也遇到了许多的问题。所以我想将我的一些ElementUI的使用经验整理下来，留待将来。
样式覆盖
这里是先谈一下ElementUI的样式覆写的问题。 第一次使用ElementUI的时候遇到ElementUI的样式不符合自己项目的要求的时候想要覆写那该怎么办？ 比如我想要修改el-button的样式可以这么做：
- 使用浏览器的控制台工具选中你想要修改的那个button按钮，你可以在控制台的样式一栏看到它现在的样式：
.el-button--primary.is-plain { color: #409EFF; background: #ecf5ff; border-color: #b3d8ff; } - 把这个样式复制到你的公共的css文件中并且修改他的内容：
.el-button--primary.is-plain { color: white; background: #C1996D; border-color: #C1996D; }<style lang="scss">这种公共style标签中修改。只需要这样父元素的类名 elementUI元素样式类名的方式.header .el-input__suffix { right: 35px; }
响应式布局
在别的一些项目中如果老板要求该项目需要适配移动端的时候也是可以使用ElementUI来进行响应式布局的。
栅格系统
ElementUI也提供了一个和BootStrap一样的栅格系统，如果你不了解栅格系统的话可以去看一下ElementUI栅格系统的介绍。它其实就是把一个元素容器的宽度分为了24等分，你可以通过调节对应元素的占比在调节所占空间的大小：
<div>
<el-row style="width:100%;">
<el-col :span="18">
<h2 class="pageTitle">
{{ $t('blocksDetail.title') }}
<span class="height">#{{ blockData.height }}</span>
</h2>
</el-col>
<el-col :span="6">
<div style="margin-top:5px;text-align: right;">
<img src="../../assets/common/next-block_arrow.93d08e79.svg" alt="arrow" @click="() => $router.push({ path: `/blocks/${$route.params.data*1 - 1}` })">
<img src="../../assets/common/next-block_arrow.93d08e79.svg" alt="arrow" style="transform: rotate(180deg);" @click="getBlockDetails(true)">
</div>
</el-col>
</el-row>
</div>
使用:span="18"表示该元素的占比是 18/24 这个 24 指的是那个div的宽度（也就是说ElementUI的栅格系统把div的宽度分为了24等份）。这样子只要你的div仍然是不定宽的（即宽度为100%填充，可以随着屏幕大小而改变）那么 h2的宽度也是可以随着改变的，因为它总是占 div 元素的 18/24
响应式布局
当然，仅仅是使用栅格系统还不足以支撑我们的响应式要求，而ElementUI也提供了响应式的布局方式： 参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
| 属性 | 说明 |
|---|---|
| xs | <768px 响应式栅格数或者栅格属性对象 |
| sm | ≥768px 响应式栅格数或者栅格属性对象 |
| md | ≥992px 响应式栅格数或者栅格属性对象 |
| lg | ≥1200px 响应式栅格数或者栅格属性对象 |
| xl | ≥1920px 响应式栅格数或者栅格属性对象 |
<div>
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="12"><Blocks @sendHeightValue="getHeightValue" class="blocks"/></el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="12"><Transactions @sendTransferValue="getTransferValue" /></el-col>
</el-row>
</div>
以及基于断点的隐藏类
Element 额外提供了一系列类名，用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要，请自行引入以下文件：
import 'element-ui/lib/theme-chalk/display.css';
| 类名 | 说明 |
|---|---|
| hidden-xs-only | 当视口在 xs 尺寸时隐藏 |
| hidden-sm-only | 当视口在 sm 尺寸时隐藏 |
| hidden-sm-and-down | 当视口在 sm 及以下尺寸时隐藏 |
| hidden-sm-and-up | 当视口在 sm 及以上尺寸时隐藏 |
| hidden-md-only | 当视口在 md 尺寸时隐藏 |
| hidden-md-and-down | 当视口在 md 及以下尺寸时隐藏 |
| hidden-md-and-up | 当视口在 md 及以上尺寸时隐藏 |
| hidden-lg-only | 当视口在 lg 尺寸时隐藏 |
| hidden-lg-and-down | 当视口在 lg 及以下尺寸时隐藏 |
| hidden-lg-and-up | 当视口在 lg 及以上尺寸时隐藏 |
| hidden-xl-only | 当视口在 xl 尺寸时隐藏 |
树形组件
在项目中有一个需求：开发一个目录树。
对于这种需求也可以使用ElementUI提供的Tree组件进行开发。
但是ElementUI中的Tree的样式可能并不符合我们的需求，我们需要进行修改那么怎么办呢？还是使用原来的方法，通过浏览器的控制台工具找到了一个可以修改Tree组件的类名：.el-tree-node__content 可以通过覆写这个类的高度从而实现对Tree组件进行自定义样式。
.el-tree-node__content {
height: 50px;
position: relative;
.custom-tree-node {
padding-right: 30px;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.el-icon-tickets {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.el-icon-tickets:before {
margin-right: 5px;
}
}
有的时候想要修改鼠标点击某个树节点的样式，这时候就需要进行一些其他的操作了:highlight-current="true"首先你必须在Tree组件中使用这个属性并且赋值为true这样子你就可以使用对这个选中时的样式进行修改了他的类名是：.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content ：
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: transparent;
.custom-tree-node :nth-of-type(1) {
color: #3582FB;
}
.myMenu {
display: block;
}
font-weight: 700;
[class^="el-icon-tickets"]{
font-weight: 700;
color: #3582FB;
}
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content:hover {
background-color: #EBF3FF;
}
文件上传
在项目中我们会经常的遇到要上传文件的操作，对于文件的上传ElementUI也为我们提供了一个很好用的组件 el-upload
这个组件十分的好用当是在用的工程中也发现了一些官方文档没有提到的一些技巧：
<el-upload
ref="upload"
name="image"
:action="subUrl"
:headers="headers"
:data="{
title: title,
content: content,
userId: $store.state.userInfo.userId
}"
:before-upload="handleUpBefore"
:on-success="handleSuccess"
list-type="picture-card"
:auto-upload="false">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
- 如何手动的删除一个已经添加到文件上传列表中的一个文件？
handleRemove(file, filelist) { console.log(filelist, Array.isArray(filelist)); this.$refs.upload.handleRemove(file) }, - 如何获取准备上传的文件的个数？
console.log(this.$refs.upload.uploadFiles.length);
有的时候我们无法在官方的文档上找到我们想要的那个效果，或是功能，这个时候可以尝试将那个elementUI元素打印到控制台上，然后去看一下，可能就会找到你想要的。比如我打印了这个文件上传的elementUI的元素：
可以找到一个叫做handleRemove的方法名，展开它的描述找到原文
handleRemove: function handleRemove(file, raw) {
var _this2 = this;
if (raw) {
file = this.getFile(raw);
}
var doRemove = function doRemove() {
_this2.abort(file);
var fileList = _this2.uploadFiles;
fileList.splice(fileList.indexOf(file), 1);
_this2.onRemove(file, fileList);
};
if (!this.beforeRemove) {
doRemove();
} else if (typeof this.beforeRemove === 'function') {
var before = this.beforeRemove(file, this.uploadFiles);
if (before && before.then) {
before.then(function () {
doRemove();
}, srcvue_type_script_lang_js_noop);
} else if (before !== false) {
doRemove();
}
}
},
嗯，就是我们想要的效果。
