Element UI(網站快速成型工具) [V2.13.2官方版]

　Element-UI組件庫是一款基于Vue 2.0的桌面端組件庫，是一款幫助網站快速成型工具，使用Element-UI組件庫可以快速設計自己需要的UI框架，提升用戶的工作效率。功能介紹

　　1、指南：了解設計指南，幫助產品設計人員搭建邏輯清晰、結構合理且高效易用的產品。

　　2、組件：使用組件 Demo 快速體驗交互細節(jié)；使用前端框架封裝的代碼幫助工程師快速開發(fā)。

　　3、主題：在線主題編輯器，可視化定制和管理站點主題、組件樣式

　　4、資源：下載相關資源，用其快速搭建頁面原型或高保真視覺稿，提升產品設計效率。

軟件特色

　　【一致性 Consistency】

　　與現(xiàn)實生活一致：與現(xiàn)實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念;

　　在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。

　　【反饋 Feedback】

　　控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作;

　　頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當前狀態(tài)。

　　【效率 Efficiency】

　　簡化流程：設計簡潔直觀的操作流程;

　　清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策;

　　幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。

　　可控 3609.html">Controllability

　　用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策;

　　結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。

軟件問答

　　1、表格字段過長省略？

　　elmentUI的table-column有提供屬性 show-overflow-tooltip 只要在對應的字段上設置為true，則文本超出部分就會用省略號替代，并且鼠標移至其上時，可查看完整信息。

　　2、如何獲取行數據作為方法參數？

　　如果要為表格的每一行都添加操作按鈕，如刪除。這些刪除按鈕綁定的是同一個方法，那么如何區(qū)分是誰調用的呢，答案就是在方法中傳入參數，而這些參數就是在渲染的時候寫死在@click的方法參數里面。獲取本行數據的方法就是scope.row.xxx，其中xxx就是本行數據的某一個屬性。如：@click="delete(scope.row.id)

　　3、如何綁定事件？

　　發(fā)現(xiàn)指定@click是沒有響應的。官方的使用方法是，在command屬性指定操作命令，然后在里面制定用于處理command的操作方法，例如@command="handleCommand"，然后在里面類似做switch的操作，即根據不同的值來進行對應的操作。還有就是command可以直接就是方法名，然后在handleCommand方法里面，這樣調用：this[command]()。這樣就是直接調用methods方法集中的對應方法。

　　但是，如果方法需要傳遞參數呢，用這種方法就不好做了?？偛荒茉僭谶@個command字符串中去把方法名和參數分別解析出來吧，那太麻煩了。解決方法就是@click.native="func"，這種方式可以直接調用methods方法集中的對應方法，傳參自然就沒問題了。

　　4、如何通過代碼關閉message提示？

　　一般我拋出提示信息，是直接this.$message。但是存在這樣的情境，即我完成了一個操作后，這個提示應該被立即關閉，而不是等它超時消失。答案就是，this.$message實際上會返回message對象的引用，那么我們定義一個變量來存這個引用，然后在需要的使用調用close方法即可。如