微信搜尋【大奇測試開】，關注這個堅持分享測試開發乾貨的傢伙。
迴歸主線更新，由於本次知識點只有一個，就不給思維導圖了，在上系列測試平臺開發實踐中主要學習了頁面直接的轉跳方法和遠端搜尋的如何做，最終實現了提測的新增的過程，這裡補下效果圖和測試結果。
演示1: 跳轉獨立新頁面做form表單並支援返回上一頁
演示2: 輸入關鍵字進行遠端多資料的搜尋選擇，並且迴帶一些預設配置資料
演示3: 輸入必填資訊提交成功自動返回上一頁面重新整理資料
檢視是否收到郵件，正常收到郵件沒問題，在這裡如果你還不清楚郵件這個是如何處理的，請往前翻看之前釋出的文章。
ICON的使用
接下來通過練習對提測平臺選單的一個小小的前端優化，瞭解 專案圖示的使用方法，注意到選單到目前為止都是相同的預設圖示，這個其實是可以進行更改的，目前element-ui admin這個框架版本選單部分需要使用自定義的資源，因此需要通過在icon資源網站下載合適圖示（.svg格式），放到前端程式碼路徑/scr/icons/svg目錄下，然後通過直接指定名字就可以了。這裡推薦“阿里巴巴圖示向量庫”，資源比較豐富，可以授權非商業化自由使用。
動手優化選單圖示，這裡為了驗證效果，兩種方式分別找兩個圖示，修改TPMWeb/src/router/index.js 中 icon值，一頓搜尋-下載-重名-匯入-修改變數後，編碼的內容如下，這裡嘗試了中英文都支援，但對於程式設計命令什麼還是建議全部為英文的最為妥當。
優化這部分後，啟動看下前後的改變，是不是看著舒服了。
另外一種在其他 控制元件或單獨使用Icon，比如之前開發的一些新增按鈕上或有 + 的圖示，這裡順便就講解下預設圖示元件的使用。
從官方文件看有兩種模式，一個是用 <i class="對應版本圖示名稱"> ，另外一個是對應元件有icon這個屬性的，舉個例子：將之前的產品管理頁面的搜尋按鈕改造成一個搜尋圖示按鈕，就會有如下的效果。
<el-button icon="el-icon-search" circle></el-button>
其實在其他地方也可以通過自定義的樣式進行組合使用，具體使用的時候可以再說說。
最後擴充套件一下最上邊的說的iconfont資源庫，是支援自己賬號建立資源專案，將自己的設計icon或者別人設計好的免費資源新增到自己的專案，然後通過不同的引用方式引入後，直接線上使用，實際測試font class方式：
步驟1：建立專案->搜尋->新增到購物車->點選列表新增到專案
步驟2: 切換到font class 方式下（其他方式可以點選官方右側使用幫助檢視。），生成一個css連線程式碼，將其新增到public/index.html 的head中，這裡使用link的引用。
步驟3: 通過<i class="iconfont 專案裡圖示名稱"></i>進行使用，再拿產品這個新增按鈕改動下程式碼
<el-button type="primary" style="float:right" @click="dialogProduct()"> <i class="iconfont tpm-code"></i> 新增 </el-button>
看下引用的效果，這樣的好處就是可以線上管理屬於自己的一套icon庫了。
好了，偷個懶本次就更新這麼多吧，程式碼也不多，原始碼等下次更新一併打TAG提交。
堅持原創，堅持實踐，堅持乾貨，如果你覺得有用，請點選推薦，也歡迎關注我部落格園和微信公眾號。