项目总结（3.28）

项目是用vue+webpack+elementUI 完成的。虽然没有什么深奥的技术和难点，但是有些细节还是值得注意的。

1、满足不同屏幕尺寸下缩放全屏显示。

单单只靠宽度、高度百分比是不可以实现的，比如如果宽度设置百分比，当屏幕宽度比较小时，这个标题一行显示不下，很容易出现问题。

这里用zoom 可以实现。具体代码：

 getSize() {this.width = window.innerWidth;this.height = window.innerHeight;},onResize() {this.getSize();const defWidth = 1920;const defHeight = 1080;const wZoom = +(this.width / defWidth).toFixed(3);const hZoom = +(this.height / defHeight).toFixed(3);const same = Math.abs(wZoom - hZoom) <= 0.5;if (same) {let _zoom = wZoom < hZoom ? wZoom : hZoom;if (_zoom > 1) _zoom = 1;$('.divZoom').css({zoom: _zoom})}}

2、我们常常遇到这样的情况，标签绑定样式 ：div-style="divStyle", divStyle在data中定义，如果divStyle 中有背景图片怎么写呢？

 　　　divStyle: {'background': `url(${ require('../link.png') }) no-repeat`,'padding-left': '80px'},　　

首先，${}是ES6提供的字符串拼接变量和表达式的新特性，其次用require 引入图片路径，不能直接写直接路径，否则打包后是无法找到的。

3、图表颜色渐变显示

　 设置itemStyle的color为new echarts.graphic.LinearGradient()线性渐变即可. 这个API在官方文档里面都没找到, 经过测试前四个参数设置为0, 0, 1, 0可以从左到右渐变. 设置为0,0,0,1可以从上到下渐变. 第5个参数数组表示开始的颜色和结束的颜色.,以下为三个颜色堆叠图的渐变设置，柱状图可以在itemStyle 中设置。

areaStyle: {

 normal: {

    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0.4,
      color: this.colorRgb(this.options.color[i],1)
    }, {
      offset: 0.8,
      color: this.colorRgb(this.options.color[i],0.6)
    }], false),
    shadowColor: 'rgba(0, 0, 0, 0.1)',
    shadowBlur: 10
  }
},

4、表格内容太长，超出显示...

这个问题很常见，每次都要去查，在这里算做个记录吧。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 注意： 自己写的table 要加： table-layout:fixed

5、使用el-table 最底部总是有一条白线。

 遇到这种情况，将下列属性改为背景色即可

.el-table::before {
  background-color: red;
}

　

6 伪元素的应用

可以实现元素激活状态前面有蓝色的边

.el {position: relative;padding-left: 25px;height: 38px;line-height: 38px;&.is-active {color: @color-primary;&::before {position: absolute;width: 3px;background: @color-primary;left: 0;content: '';height: 100%;top: 1px;}}
}