element-ui簡單筆記(上)

element-ui的簡單筆記

element-ui簡單筆記(中)
element-ui簡單筆記(下)

關注一下公衆號：內有相關文章！！

一、element-ui簡介

1.Element UI 引言

官網:https://element.eleme.io/#/zh-CN

1.1 官方定義

網站快速成型工具 和 桌面端組件庫

1.2 定義

element ui 就是基於vue的一個ui框架,該框架基於vue開發了很多相關組件,方便我們快速開發頁面。

1.3 由來

餓了麼前端團隊 基於vue進行開發並且進行了開源 element ui 中提供全部都是封裝好組件。

二、安裝element-ui

2.1通過vue腳手架創建項目

vue init webpack element(項目名)

2.2在vue腳手架項目中安裝elementui

# 1.下載elementui的依賴
	npm i element-ui -S

# 2.指定當前項目中使用elementui
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';

  //在vue腳手架中使用elementui
	Vue.use(ElementUI);

---

三、按鈕組件(示例)

3.1 默認樣式按鈕

<el-row>
  <el-button>默認按鈕</el-button>
  <el-button type="primary">主要按鈕</el-button>
  <el-button type="success">成功按鈕</el-button>
  <el-button type="info">信息按鈕</el-button>
  <el-button type="warning">警告按鈕</el-button>
  <el-button type="danger">危險按鈕</el-button>
</el-row>

3.2 簡潔按鈕

<el-row>
  <el-button plain>樸素按鈕</el-button>
  <el-button type="primary" plain>主要按鈕</el-button>
  <el-button type="success" plain>成功按鈕</el-button>
  <el-button type="info" plain>信息按鈕</el-button>
  <el-button type="warning" plain>警告按鈕</el-button>
  <el-button type="danger" plain>危險按鈕</el-button>
</el-row>

3.3 圓角按鈕

<el-row>
  <el-button round>圓角按鈕</el-button>
  <el-button type="primary" round>主要按鈕</el-button>
  <el-button type="success" round>成功按鈕</el-button>
  <el-button type="info" round>信息按鈕</el-button>
  <el-button type="warning" round>警告按鈕</el-button>
  <el-button type="danger" round>危險按鈕</el-button>
</el-row>

3.4 圖標按鈕

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

四、按鈕組件的詳細使用

總結:日後使用element ui的相關組件時需要注意的是 所有組件都是el-組件名稱開頭

4.1創建按鈕

<el-button>默認按鈕</el-button>

4.2 按鈕屬性使用

<el-button type="primary" 屬性名=屬性值>默認按鈕</el-button>
<el-button type="success" size="medium" plain=true round circle icon="el-icon-loading"></el-button>

總結:在elementui中所有組件的屬性全部寫在組件標籤上

4.3 按鈕組使用

<el-button-group>
  <el-button type="primary" icon="el-icon-back">上一頁</el-button>
  <el-button type="primary" icon="el-icon-right">下一頁</el-button>
</el-button-group>

注意:

• 在element ui中所有組件都是 el-組件名稱 方式進行命名
• 在element ui中組件的屬性使用都是直接將屬性名=屬性值方式寫在對應的組件標籤上

五、Link文字鏈接組件

5.1 文字鏈接組件的創建

<el-link>默認鏈接</el-link>

5.2 文字鏈接組件的屬性的使用

<el-link  target="_blank" href="http://www.baidu.com" >默認鏈接</el-link>
<el-link type="primary":underline="false">默認鏈接</el-link>
<el-link type="success" disabled>默認鏈接</el-link>
<el-link type="info" icon="el-icon-platform-eleme">默認鏈接</el-link>
<el-link type="warning">默認鏈接</el-link>
<el-link type="danger">默認鏈接</el-link>

六、Layout(柵格)佈局組件

通過基礎的 24 分欄，迅速簡便地創建佈局

在element ui中佈局組件將頁面劃分爲多個行row,每行最多分爲24欄(列)

6.1 使用Layout組件

<el-row>
	<el-col :span="8">佔用8份</el-col>
  <el-col :span="8">佔用8份</el-col>
  <el-col :span="8">佔用8份</el-col>
</el-row>

注意:

• 在一個佈局組件中 是由 row 和 col 組合而成
• 在使用時要區分 row屬性 和 col屬性

6.2 屬性的使用

• 行屬性使用

  <el-row :gutter="50" tag="span">
    <el-col :span="4"><div style="border: 1px red solid;">佔用4份</div></el-col>
    <el-col :span="8"><div style="border: 1px red solid;">佔用8份</div></el-col>
    <el-col :span="3"><div style="border: 1px red solid;">佔用3份</div></el-col>
    <el-col :span="9"><div style="border: 1px red solid;">佔用9份</div></el-col>
  </el-row>
  

• 列屬性的使用

  <el-row>
    <el-col :span="12" :offset="9" :psuh="3" xs><div style="border: 1px blue solid;">我是佔用12分</div></el-col>
    <el-col :span="6"><div style="border: 1px blue solid;">我是佔用6分</div></el-col>
  </el-row>
  

七、Container佈局容器組件

7.1 創建佈局容器

<el-container>
	
</el-container>

7.2 容器中包含的子元素

<el-header>：頂欄容器。
<el-aside>：側邊欄容器。
<el-main>：主要區域容器。
<el-footer>：底欄容器。

7.3 容器的嵌套使用

<!--創建容器-->
<el-container>
  <!--header-->
  <el-header><div><h1>我是標題</h1></div></el-header>
  <!--容器嵌套使用-->
  <el-container>
    <!--aside-->
    <el-aside><div><h1>我是菜單</h1></div></el-aside>
    <!--main-->
    <el-main><div><h1>我是中心內容</h1></div></el-main>
  </el-container>
  <el-footer><div><h1>我是頁腳</h1></div></el-footer>
</el-container>

7.4 水平容器

<el-container direction="horizontal">
  <!--header-->
  <el-header><div><h1>我是標題</h1></div></el-header>
  <el-container>
    <!--aside-->
    <el-aside><div><h1>我是菜單</h1></div></el-aside>
    <!--main-->
    <el-main><div><h1>我是中心內容</h1></div></el-main>
  </el-container>
  <el-footer><div><h1>我是頁腳</h1></div></el-footer>
</el-container>

注意:當子元素中沒有有 el-header 或 el-footer 時容器排列爲水平

7.5 垂直容器

<el-container direction="vertical">
  <!--header-->
  <el-header><div><h1>我是標題</h1></div></el-header>
  <el-container>
    <!--aside-->
    <el-aside><div><h1>我是菜單</h1></div></el-aside>
    <!--main-->
    <el-main><div><h1>我是中心內容</h1></div></el-main>
  </el-container>
  <!--footer-->
  <el-footer><div><h1>我是頁腳</h1></div></el-footer>
</el-container>

element-ui的組件太多了，我也就是把我最近練習的給記錄下來，其餘的這裏就不再一一介紹了，大家有需要的可以看文檔，自行去測試。謝謝！！！