elementUi 適合於Vue的UI框架

2021-09-25 04:36:45 字數 2131 閱讀 7006

element-ui是乙個ui庫,它不依賴於vue。但是卻是當前和vue配合做專案開發的乙個比較好的ui框架。

element-ui借用了bootstrap框架的思想,使用了柵格布局。它把單一的分欄分為24列。基本的使用方式如下

span屬性:表示col所要占領的柵格佔比個數。 

offset屬性:表示col相對偏移的個數。

這些布局容器,一般充當div來使用。

el-container:外層容器。當子元素中包含 el-header 或 el-footer 時,全部子元素會垂直上下排列,否則會水平左右排列。

el-header:頂欄容器

el-footer:底部欄容器

el-aside:側邊欄容器

el-main:頁面主檢視

在element-ui 中,圖示是用class就可以搞定的。

按鈕是el-button來表示的

按鈕是分類的,每一種型別就對應不同的button。

按鈕的型別type可取值:』primary』、』success』、』warning』、』info』、』danger』

plain:決定了按鈕是否使用素色系列。

round:決定了按鈕是不是圓角展示。

預設按鈕

主要按鈕

成功按鈕

警告按鈕

預設按鈕

預設按鈕

//元件

//data資料

options: [,]

},,]

picker-options是乙個物件。

這個物件的屬性有start、step、end、selectablerange等。

當設定selectablerange屬性時,它提供了乙個時間選擇的點。

日期選擇器的type屬性,決定選擇的型別,這個type可以是date、week、month、year。

本質就是把type改為datetime。

element-ui的form表單元件:el-form

element-ui的formitem元件:el-form-item

乙個簡單的form表單的實現如下:

form表單還有驗證:form的rules就是用來驗證使用。

el-table:element-ui的**。

el-table-column:element-ui的**所對應的列。

table屬性中:stripe屬性可以建立帶斑馬紋的**。

table屬性中:border屬性可以建立帶斑馬紋的**。

table屬性中:height屬性可實現固定表頭的**。

其實就相當於乙個輪播

type屬性:可以讓輪播卡片化

interval屬性:定義輪播切換的週期

摺疊面板的el-collapse-item需要title屬性。

與現實生活一致:與現實生活的流程、邏輯保持一致,遵循使用者習慣的語言和概念;

在介面中一致:所有的元素和結構需保持一致,比如:設計樣式、圖示和文字、元素的位置等。

el-menu

el-menu:表示導航選單的盒子。 

el-submenu:表示導航選單的子盒子選項。 

el-menu-item:表示導航選單的每一項。

其中submenu和munuitem都是用於屬性index。

處理中心

我的工作台

選項1 選項2

選項3訂單管理

el-tabs

使用者管理

data屬性:代表著樹形元件的渲染。

Linux 系統是否適合於您?

並非人人都適合使用 linux 對許多使用者來說,windows 或 osx 會是更好的選擇。我喜歡使用 linux 桌面系統,並不是因為軟體的政治性質,也不是不喜歡其它作業系統。我喜歡 linux 系統因為它能滿足我的需求並且確實適合使用。我的經驗是,並非人人都適合切換至 linux 的生活方式 ...

為什麼ELT更適合於企業資料應用?

為什麼elt更適合於企業資料應用 datapipeline陳肅 為什麼現在企業環境中,乙個elt的方案會比etl的方案更有優勢,實際上是由 企業資料應用特點決定的。首先在乙個企業資料應用裡面我們對資料轉換的靈活性要求越來越高,傳統來說如果是bi應用可能相對來說是比較容易抽象的。但是現在大量企業在開發...

C 不包含適合於入口點的靜態「Main」方法

今天在敲簡單工廠模式的時候出現這樣乙個問題 出現這樣的問題是因為你的程式裡面沒有 static void main string args 這樣的入口點,static void main 是程式的主方法,也就是程式的入口,也是唯一的入口。程式執行需要這樣的入口才能執行整個程式。解決 原因 因為我的這...