項目總結（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;
    }
  }
}