西西軟件園多重安全檢測下載網(wǎng)站、值得信賴的軟件下載站!
西西首頁 電腦軟件 安卓軟件 電腦游戲 安卓游戲 排行榜 專題合集

網(wǎng)站開發(fā)組件庫(Element UI)

v2.14.1 官方版
  • 網(wǎng)站開發(fā)組件庫(Element UI)v2.14.1 官方版
  • 軟件大小:2.7M
  • 更新時間:2020-11-17 08:41
  • 軟件語言:中文
  • 軟件廠商:
  • 軟件類別:國產(chǎn)軟件 / 免費軟件 / 編程工具
  • 軟件等級:3級
  • 應(yīng)用平臺:WinAll
  • 官方網(wǎng)站:暫無
  • 應(yīng)用備案:
好評:50%
壞評:50%

軟件介紹

Element UI是一款基于Vue 2.0的桌面端組件庫,使用在線主題編輯器,可以修改定制 Element 所有全局和組件的 Design Tokens,使用Element-UI組件庫可以快速設(shè)計自己需要的UI框架,提升用戶的工作效率。

網(wǎng)站開發(fā)組件庫(Element UI)

功能介紹:

1、指南:了解設(shè)計指南,幫助產(chǎn)品設(shè)計人員搭建邏輯清晰、結(jié)構(gòu)合理且高效易用的產(chǎn)品。

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

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

4、資源:下載相關(guān)資源,用其快速搭建頁面原型或高保真視覺稿,提升產(chǎn)品設(shè)計效率。

軟件特色:

【一致性 Consistency】

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

在界面中一致:所有的元素和結(jié)構(gòu)需保持一致,比如:設(shè)計樣式、圖標(biāo)和文本、元素的位置等。

【反饋 Feedback】

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

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

【效率 Efficiency】

簡化流程:設(shè)計簡潔直觀的操作流程;

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

幫助用戶識別:界面簡單直白,讓用戶快速識別而非回憶,減少用戶記憶負(fù)擔(dān)。

可控 Controllability

用戶決策:根據(jù)場景可給予用戶操作建議或安全提示,但不能代替用戶進行決策;

結(jié)果可控:用戶可以自由的進行操作,包括撤銷、回退和終止當(dāng)前操作等。

常見問題:

1、表格字段過長省略?

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

2、如何獲取行數(shù)據(jù)作為方法參數(shù)?

如果要為表格的每一行都添加操作按鈕,如刪除。這些刪除按鈕綁定的是同一個方法,那么如何區(qū)分是誰調(diào)用的呢,答案就是在方法中傳入?yún)?shù),而這些參數(shù)就是在渲染的時候?qū)懰涝贎click的方法參數(shù)里面。獲取本行數(shù)據(jù)的方法就是scope.row.xxx,其中xxx就是本行數(shù)據(jù)的某一個屬性。如:@click="delete(scope.row.id)

3、<el-dropdown-item>如何綁定事件?

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

但是,如果方法需要傳遞參數(shù)呢,用這種方法就不好做了。總不能再在這個command字符串中去把方法名和參數(shù)分別解析出來吧,那太麻煩了。解決方法就是@click.native="func",這種方式可以直接調(diào)用methods方法集中的對應(yīng)方法,傳參自然就沒問題了。

4、如何通過代碼關(guān)閉message提示?

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

5、如何動態(tài)修改下拉框的可選項?

有些時候,當(dāng)前下拉框的選項取決于前一個下拉框的選中項,這時候就需要動態(tài)變動可選項。其中下來框的可選項<el-option>一般都是通過v-for渲染的。如<el-option v-for="item in items" ....>。那么動態(tài)修改可選項的話,直接修改要遍歷的數(shù)組就可以了,即修改items數(shù)組的內(nèi)容就可以了。另外如果當(dāng)前下拉選項由上一個下來框的選中值決定,那么上一個下來框就可以在@change方法里面進行這個操作。

更新日志:

網(wǎng)站開發(fā)組件庫(Element UI) v2.14.1

Bug 修復(fù)

Popover

兼容 Vue 2.6 新 v-slot 語法 (#20424 by @iamkun)

優(yōu)化

I18n

更新阿拉伯語翻譯 (#20202 by @elkattan)

更新維吾爾語翻譯 (#20177 by @IlhamTahir)

網(wǎng)站開發(fā)組件庫(Element UI) v2.9.1新特性

Autocomplete

添加 change 事件 (#17913 by @sxzz)

Bug 修復(fù)

Autocomplete

修復(fù)類型為 textarea 時建議錯誤問題 (#18478 by @Roojay)

Carousel

修復(fù) console.warn 文案拼寫錯誤 (#18264 by @IceFox)

Image

修復(fù)當(dāng) preview-src-list 屬性不包含 src 時圖片預(yù)覽大圖展示為空的問題 (#18975) (#19130 by @luckyCao)

修復(fù)第二次圖片預(yù)覽時快捷鍵失效問題 (#18983) (#19156 by @luckyCao)

修復(fù) preview-src-list 為空時點擊圖片會給 body 添加 overflow: scroll 的問題 (#18967 by @inooNgt)

Transfer

修復(fù)和 Form 組件一起使用時錯誤的行高問題 (#18917 by @Hanx)

InputNumber

正確計算 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)

軟件標(biāo)簽: ElementUI 開發(fā)

其他版本下載

發(fā)表評論

昵稱:
表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
查看所有(0)條評論 > 字?jǐn)?shù): 0/500

TOP
軟件下載