项目总结（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;
       3px;
      background: @color-primary;
      left: 0;
      content: '';
      height: 100%;
      top: 1px;
    }
  }
}