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