element框架是一款非常不錯(cuò)的前端框架，使用這款軟件用戶可以非常快速的進(jìn)行前端網(wǎng)站的架設(shè)，是一款可以幫助開發(fā)者、設(shè)計(jì)師、產(chǎn)品經(jīng)理...等多個(gè)崗位提高工作效率的軟件，編程的發(fā)展趨勢是越來越趨于開源，趨于流程式的開發(fā)，各種框架，不讓程序員重復(fù)的造輪子，而前端當(dāng)中想要實(shí)現(xiàn)這一點(diǎn)則就是需要各種框架的支持，不論是jQuery、Vue、layui...等等框架，都是幫助編程人員像搭腳手架一樣快速的開發(fā)，今天小編帶來的
element ui官方版擁有相當(dāng)全面的組件庫，用戶可以從當(dāng)中獲取相當(dāng)全面的設(shè)計(jì)配套工具，可以在最短的時(shí)間內(nèi)做出優(yōu)良的產(chǎn)品，大大的節(jié)省使用者的開發(fā)時(shí)間和開發(fā)成本，是一款非常不錯(cuò)的前端框架軟件，有需要的朋友可以從本站下載體驗(yàn)。
軟件特色
1、一致性 Consistency
與現(xiàn)實(shí)生活一致：與現(xiàn)實(shí)生活的流程、邏輯保持一致，遵循用戶習(xí)慣的語言和概念;
在界面中一致：所有的元素和結(jié)構(gòu)需保持一致，比如：設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。
2、反饋 Feedback
控制反饋：通過界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作;
頁面反饋：操作后，通過頁面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。
3、效率 Efficiency
簡化流程：設(shè)計(jì)簡潔直觀的操作流程;
清晰明確：語言表達(dá)清晰且表意明確，讓用戶快速理解進(jìn)而作出決策;
幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負(fù)擔(dān)。
4、可控 Controllability
用戶決策：根據(jù)場景可給予用戶操作建議或安全提示，但不能代替用戶進(jìn)行決策;
結(jié)果可控：用戶可以自由的進(jìn)行操作，包括撤銷、回退和終止當(dāng)前操作等。
安裝教程
這并非是一個(gè)簡單的雙擊安裝軟件，想要安裝這款軟件需要在項(xiàng)目下進(jìn)行一定的操作，下面小編為大家?guī)碥浖陌惭b教程步驟，感興趣的用戶快來看看吧。
1、在項(xiàng)目下輸入 npm install element-ui -S
2、查看配置文件package.json，是否有組件的版本號 如下圖：
3、安裝成功后 ，在node_modules中可以看到這款框架的文件夾 ，所有安裝的源文件可以在這里面找到。
4、在main.js文件中引入element組件：
軟件功能
1、指南：了解設(shè)計(jì)指南，幫助產(chǎn)品設(shè)計(jì)人員搭建邏輯清晰、結(jié)構(gòu)合理且高效易用的產(chǎn)品。
2、組件：使用組件 Demo 快速體驗(yàn)交互細(xì)節(jié)；使用前端框架封裝的代碼幫助工程師快速開發(fā)。
3、主題：在線主題編輯器，可視化定制和管理站點(diǎn)主題、組件樣式。
4、資源：下載相關(guān)資源，用其快速搭建頁面原型或高保真視覺稿，提升產(chǎn)品設(shè)計(jì)效率。
使用教程
1、我們使用vue-cli腳手架工具搭建一個(gè)前端項(xiàng)目-然后安裝vue-cli【命令是npm install vue-cli -g】），然后我們利用命令【vue init webpack newtest】（newtest是項(xiàng)目的名稱，可以自己取名字），然后搭建好vue項(xiàng)目，詳細(xì)如下圖
2、搭建好vue前端項(xiàng)目以后，我們安裝到項(xiàng)目中，我們利用命令行工具指定到項(xiàng)目根目錄中，然后輸入命令【npm i element-ui -S】，詳細(xì)如下圖
3、安裝到項(xiàng)目中以后，我們將完整引入整個(gè)element，下面是官網(wǎng)提供的方法，詳細(xì)如下圖
軟件亮點(diǎn)
1、視覺設(shè)計(jì)優(yōu)秀，細(xì)節(jié)處理到位。
2、交互體驗(yàn)很好，即使是復(fù)雜的表單操作，反饋也非常清晰，操作簡潔直觀。
3、較容易上手，基于vue.js開發(fā)，官網(wǎng)實(shí)例代碼很充足。
4、支持定制主題。
5、支持VueReactAngular，滿足各前端技術(shù)型。
常見問題
1、表格字段過長省略？
elmentUI的table-column有提供屬性 show-overflow-tooltip 只要在對應(yīng)的字段上設(shè)置為true，則文本超出部分就會(huì)用省略號替代，并且鼠標(biāo)移至其上時(shí)，可查看完整信息。
2、如何獲取行數(shù)據(jù)作為方法參數(shù)？
如果要為表格的每一行都添加操作按鈕，如刪除。這些刪除按鈕綁定的是同一個(gè)方法，那么如何區(qū)分是誰調(diào)用的呢，答案就是在方法中傳入?yún)?shù)，而這些參數(shù)就是在渲染的時(shí)候?qū)懰涝贎click的方法參數(shù)里面。獲取本行數(shù)據(jù)的方法就是scope.row.xxx，其中xxx就是本行數(shù)據(jù)的某一個(gè)屬性。如：@click="delete(scope.row.id)
3、如何綁定事件？
發(fā)現(xiàn)指定@click是沒有響應(yīng)的。官方的使用方法是，在command屬性指定操作命令，然后在里面制定用于處理command的操作方法，例如@command="handleCommand"，然后在里面類似做switch的操作，即根據(jù)不同的值來進(jìn)行對應(yīng)的操作。還有就是command可以直接就是方法名，然后在handleCommand方法里面，這樣調(diào)用：this[command]()。這樣就是直接調(diào)用methods方法集中的對應(yīng)方法。
但是，如果方法需要傳遞參數(shù)呢，用這種方法就不好做了?？偛荒茉僭谶@個(gè)command字符串中去把方法名和參數(shù)分別解析出來吧，那太麻煩了。解決方法就是@click.native="func"，這種方式可以直接調(diào)用methods方法集中的對應(yīng)方法，傳參自然就沒問題了。
4、如何通過代碼關(guān)閉message提示？
一般我拋出提示信息，是直接this.$message。但是存在這樣的情境，即我完成了一個(gè)操作后，這個(gè)提示應(yīng)該被立即關(guān)閉，而不是等它超時(shí)消失。答案就是，this.$message實(shí)際上會(huì)返回message對象的引用，那么我們定義一個(gè)變量來存這個(gè)引用，然后在需要的使用調(diào)用close方法即可。如 messageHandle = this.$message(...) messageHandle.close()
5、如何動(dòng)態(tài)修改下拉框的可選項(xiàng)？
有些時(shí)候，當(dāng)前下拉框的選項(xiàng)取決于前一個(gè)下拉框的選中項(xiàng)，這時(shí)候就需要?jiǎng)討B(tài)變動(dòng)可選項(xiàng)。其中下來框的可選項(xiàng)一般都是通過v-for渲染的。如。那么動(dòng)態(tài)修改可選項(xiàng)的話，直接修改要遍歷的數(shù)組就可以了，即修改items數(shù)組的內(nèi)容就可以了。另外如果當(dāng)前下拉選項(xiàng)由上一個(gè)下來框的選中值決定，那么上一個(gè)下來框就可以在@change方法里面進(jìn)行這個(gè)操作。
更新日志
v2.9.1：
新特性
Autocomplete
添加 change 事件 (#17913 by @sxzz)
Bug 修復(fù)
Autocomplete
修復(fù)類型為 textarea 時(shí)建議錯(cuò)誤問題 (#18478 by @Roojay)
Carousel
修復(fù) console.warn 文案拼寫錯(cuò)誤 (#18264 by @IceFox)
Image
修復(fù)當(dāng) preview-src-list 屬性不包含 src 時(shí)圖片預(yù)覽大圖展示為空的問題 (#18975) (#19130 by @luckyCao)
修復(fù)第二次圖片預(yù)覽時(shí)快捷鍵失效問題 (#18983) (#19156 by @luckyCao)
修復(fù) preview-src-list 為空時(shí)點(diǎn)擊圖片會(huì)給 body 添加 overflow: scroll 的問題 (#18967 by @inooNgt)
Transfer
修復(fù)和 Form 組件一起使用時(shí)錯(cuò)誤的行高問題 (#18917 by @Hanx)
InputNumber
正確計(jì)算 inputNumberDisabled (#18439 by @ashuser-pendo)
Chore
更新首頁文案 (#19155 by @iamkun)
Doc
更新 Popconfirm 文檔 (#18324 by @iamkun)
修復(fù) step-strictly 文檔拼寫問題 (#18705 by @dream2023)
修復(fù) Steps 組件文檔問題 (#17555 by @haoranyu)
0條評論