項目是用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;}} }

　　

?

　

?

轉載于:https://www.cnblogs.com/caolidan/p/8676891.html

總結

以上是生活随笔為你收集整理的项目总结（3.28）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。