軟件介紹
Element-UI是一款專門提供給開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理等多種職業(yè)使用的網(wǎng)站快速成型工具,這款軟件會(huì)為用戶提供UI框架,這樣你在進(jìn)行前端開發(fā)的時(shí)候,就可以通過(guò)Element-UI組件庫(kù)來(lái)獲取到最全的配套設(shè)計(jì)資源,從而讓你在最短時(shí)間內(nèi)完成網(wǎng)站開發(fā)。
軟件簡(jiǎn)介
Element ui是由國(guó)產(chǎn)團(tuán)隊(duì)基于vue.js 2.0打造的桌面端UI框架,主要知用于開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理等前端設(shè)計(jì)人員打造,該框架大大地簡(jiǎn)化了操作流程,配合準(zhǔn)備好的設(shè)計(jì)資源能夠幫助開發(fā)者快速設(shè)計(jì)出滿意的網(wǎng)站,可以大大地減少了開發(fā)人員的人力和時(shí)間,有從事前端開發(fā)的設(shè)計(jì)人員快快下載吧。
Element-UI軟件特色
指南
了解設(shè)計(jì)指南,幫助產(chǎn)品設(shè)計(jì)人員搭建邏輯清晰、結(jié)構(gòu)合理且高效易用的產(chǎn)品。
組件
使用組件 Demo 快速體驗(yàn)交互細(xì)節(jié);使用前端框架封裝的代碼幫助工程師快速開發(fā)。
主題
在線主題編輯器,可視化定制和管理站點(diǎn)主題、組件樣式
資源
下載相關(guān)資源,用其快速搭建頁(yè)面原型或高保真視覺(jué)稿,提升產(chǎn)品設(shè)計(jì)效率。
Element-UI軟件優(yōu)勢(shì)
一致性 Consistency
與現(xiàn)實(shí)生活一致:與現(xiàn)實(shí)生活的流程、邏輯保持一致,遵循用戶習(xí)慣的語(yǔ)言和概念;
在界面中一致:所有的元素和結(jié)構(gòu)需保持一致,比如:設(shè)計(jì)樣式、圖標(biāo)和文本、元素的位置等。
反饋 Feedback
控制反饋:通過(guò)界面樣式和交互動(dòng)效讓用戶可以清晰的感知自己的操作;
頁(yè)面反饋:操作后,通過(guò)頁(yè)面元素的變化清晰地展現(xiàn)當(dāng)前狀態(tài)。
效率 Efficiency
簡(jiǎn)化流程:設(shè)計(jì)簡(jiǎn)潔直觀的操作流程;
清晰明確:語(yǔ)言表達(dá)清晰且表意明確,讓用戶快速理解進(jìn)而作出決策;
幫助用戶識(shí)別:界面簡(jiǎn)單直白,讓用戶快速識(shí)別而非回憶,減少用戶記憶負(fù)擔(dān)。
可控 Controllability
用戶決策:根據(jù)場(chǎng)景可給予用戶操作建議或安全提示,但不能代替用戶進(jìn)行決策;
結(jié)果可控:用戶可以自由的進(jìn)行操作,包括撤銷、回退和終止當(dāng)前操作等。
Element-UI安裝步驟
1.在項(xiàng)目下輸入 npm install element-ui -S
2.查看配置文件package.json,是否有element-ui組件的版本號(hào) 如下圖:
3.安裝成功后 ,在node_modules中可以看到 element-ui的文件夾 ,所有安裝的源文件可以在這里面找到
4. 在main.js文件中引入element組件:
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Element-UI使用方法
element-ui框架怎么搭前臺(tái)?
第一步,我們使用vue-cli腳手架工具搭建一個(gè)前端項(xiàng)目(如果沒(méi)有安裝我們可以先安裝node【上官網(wǎng)下載安裝就可以】-然后安裝vue-cli【命令是npm install vue-cli -g】),然后我們利用命令【vue init webpack newtest】(newtest是項(xiàng)目的名稱,可以自己取名字),然后搭建好vue項(xiàng)目,詳細(xì)如下圖
第二步,搭建好vue前端項(xiàng)目以后,我們安裝element到項(xiàng)目中,我們利用命令行工具指定到項(xiàng)目根目錄中,然后輸入命令【npm i element-ui -S】,詳細(xì)如下圖
第三步,安裝element到項(xiàng)目中以后,我們將完整引入整個(gè)element,下面是官網(wǎng)提供的方法,詳細(xì)如下圖
第四步,根據(jù)官網(wǎng)的教程,我們開始引入element-ui,我們?cè)趧?chuàng)建好的項(xiàng)目中打開【src文件夾】-【main.js】下引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
詳細(xì)如下圖
第五步,還是在【main.js】上加入
Vue.use(ElementUI);
這樣就引用element完成了,詳細(xì)如下圖
第六步,我們引用element以后,我們可以使用組件吧,我們上官網(wǎng)隨便找一個(gè)組件,例如單選框,下面是組件詳細(xì)的樣式和使用方法,詳細(xì)如下圖
第七步,我們?cè)趘ue項(xiàng)目中復(fù)制代碼,我們找到【src】-【components】-【HelloWorld.vue】,中加入剛剛第五步,復(fù)制的代碼進(jìn)入,詳細(xì)的代碼如下圖
第八步,我們運(yùn)行項(xiàng)目(利用命令行工具指定到項(xiàng)目的根地址,然后運(yùn)行【npm run dev】),然后就可以在網(wǎng)頁(yè)上查看效果了,發(fā)現(xiàn)和element官網(wǎng)上的一樣,大功告成,詳細(xì)如下圖
常見問(wèn)題
1.表格字段過(guò)長(zhǎng)省略?
elmentUI的table-column有提供屬性 show-overflow-tooltip 只要在對(duì)應(yīng)的字段上設(shè)置為true,則文本超出部分就會(huì)用省略號(hào)替代,并且鼠標(biāo)移至其上時(shí),可查看完整信息。
2.如何獲取行數(shù)據(jù)作為方法參數(shù)?
如果要為表格的每一行都添加操作按鈕,如刪除。這些刪除按鈕綁定的是同一個(gè)方法,那么如何區(qū)分是誰(shuí)調(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.<el-dropdown-item>如何綁定事件?
發(fā)現(xiàn)<el-dropdown-item>指定@click是沒(méi)有響應(yīng)的。官方的使用方法是,在command屬性指定操作命令,然后在<el-menu>里面制定用于處理command的操作方法,例如@command="handleCommand",然后在里面類似做Switch的操作,即根據(jù)不同的值來(lái)進(jìn)行對(duì)應(yīng)的操作。還有就是command可以直接就是方法名,然后在handleCommand方法里面,這樣調(diào)用:this[command]()。這樣就是直接調(diào)用methods方法集中的對(duì)應(yīng)方法。
但是,如果方法需要傳遞參數(shù)呢,用這種方法就不好做了。總不能再在這個(gè)command字符串中去把方法名和參數(shù)分別解析出來(lái)吧,那太麻煩了。解決方法就是@click.native="func",這種方式可以直接調(diào)用methods方法集中的對(duì)應(yīng)方法,傳參自然就沒(méi)問(wèn)題了。
4.如何通過(guò)代碼關(guān)閉message提示?
一般我拋出提示信息,是直接this.$message。但是存在這樣的情境,即我完成了一個(gè)操作后,這個(gè)提示應(yīng)該被立即關(guān)閉,而不是等它超時(shí)消失。答案就是,this.$message實(shí)際上會(huì)返回message對(duì)象的引用,那么我們定義一個(gè)變量來(lái)存這個(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)。其中下來(lái)框的可選項(xiàng)<el-option>一般都是通過(guò)v-for渲染的。如<el-option v-for="item in items" ....>。那么動(dòng)態(tài)修改可選項(xiàng)的話,直接修改要遍歷的數(shù)組就可以了,即修改items數(shù)組的內(nèi)容就可以了。另外如果當(dāng)前下拉選項(xiàng)由上一個(gè)下來(lái)框的選中值決定,那么上一個(gè)下來(lái)框就可以在@change方法里面進(jìn)行這個(gè)操作。
- 精選留言 來(lái)自吉林遼源電信用戶 發(fā)表于: 2023-2-23
- 以前安裝過(guò),不錯(cuò)
- 精選留言 來(lái)自四川廣安移動(dòng)用戶 發(fā)表于: 2023-8-4
- 很好玩,希望大家都來(lái)玩一下
- 精選留言 來(lái)自廣東廣州電信用戶 發(fā)表于: 2023-8-7
- 很好用,比之前版本好多了。必須贊一個(gè)?。?!
- 精選留言 來(lái)自四川成都電信用戶 發(fā)表于: 2023-11-28
- 非常好的網(wǎng)站,下載可以直接安裝
- 精選留言 來(lái)自廣東韶關(guān)移動(dòng)用戶 發(fā)表于: 2023-4-27
- 不僅軟件很給力,教程也給力,十分需要