簡介

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

1、安裝Element UI，通過vue腳手架創建項

vue init webpack element(項目名)

2、在vue腳手架項目中安裝elementui

# 1.下載elementui的依賴npm i element-ui -S # 2.指定當前項目中使用elementuiimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';//在vue腳手架中使用elementuiVue.use(ElementUI);

3.按鈕組件(示例)

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>

4.按鈕組件的詳細使用

總結:日后使用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>

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中組件的屬性使用都是直接將屬性名=屬性值方式寫在對應的組件標簽上

5.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>

6.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>

7.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>

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>

8.Form相關組件

8.1 Radio單選按鈕

創建Radio按鈕

<!--組件創建--> <el-radio v-model="label" label="男">男</el-radio> <el-radio v-model="label" label="女">女</el-radio> <script>export default {name: "Radio",data(){return{label:'男'}}} </script>

Radio按鈕屬性的使用

<el-radio v-model="label" name="sex" disabled label="男">男</el-radio> <el-radio v-model="label" name="sex" border size="small" label="女">女</el-radio> <el-radio v-model="label" border size="mini" label="女">女</el-radio> <el-radio v-model="label" border size="medium" label="女">女</el-radio>

Radio事件的使用

<el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio> <el-radio v-model="label" @change="aa" name="sex" border size="small" label="女">女</el-radio> <script>export default {name: "Radio",data(){return{label:'男'}},methods:{aa(){ //定義的事件處理函數console.log(this.label);}}} </script>

• 事件的使用也是和屬性使用是一致都是直接寫在對應的組件標簽上
• 事件在使用時必須使用Vue中綁定時間方式進行使用如 @事件名=事件處理函數(綁在在vue組件中對應函數)

9、radio按鈕組

<el-radio-group v-model="radio"><el-radio :label="3">備選項3</el-radio><el-radio :label="6">備選項6</el-radio><el-radio :label="9">備選項9</el-radio> </el-radio-group> <script>export default {name: "Radio",data() {return {radio: 6}}} </script>

10、checkbox組件

10.1、創建checkbox組件

<el-checkbox v-model="checked">北京</el-checkbox> <el-checkbox v-model="checked">上海</el-checkbox> <el-checkbox v-model="checked">天津</el-checkbox>

10.2、屬性使用

<el-checkbox v-model="checked" disabled true-label="北京">北京</el-checkbox> <el-checkbox checked border true-label="上海">上海</el-checkbox> <el-checkbox v-model="checked" true-label="天津">天津</el-checkbox>

10.3、事件使用

<el-checkbox @change="aa"v-model="checked" true-label="上海">上海</el-checkbox> <el-checkbox v-model="checked" @change="aa" true-label="天津">天津</el-checkbox> <script>export default {name: "Checkbox",data(){return{checked:true}},methods:{aa(){console.log(this.checked);}}} </script>

10.4、復選框組的使用

<el-checkbox-group @change="bb" :min="1" v-model="checkList"><el-checkbox label="復選框 A"></el-checkbox><el-checkbox label="復選框 B"></el-checkbox><el-checkbox label="復選框 C"></el-checkbox><el-checkbox label="禁用" disabled></el-checkbox><el-checkbox label="選中且禁用" disabled></el-checkbox> </el-checkbox-group> <script>export default {name: "Checkbox",data(){return{checked:true,checkList:[],}},methods:{aa(){console.log(this.checked);},bb(){console.log(this.checkList);}}} </script>

11、Input 輸入框組件

1.創建Input組件

<el-input v-model="name"></el-input> <script>export default {name: "Input",data(){return {name:'xiaochen'}}} </script>

2.常用屬性

<el-input v-model="name" disabled type="textarea"></el-input> <el-input v-model="price" :maxlength="10" show-word-limit :minlength="5"></el-input> <el-input prefix-icon="el-icon-user-solid" placeholder="請輸入用戶名" clearable v-model="username"></el-input> <el-input suffix-icon="el-icon-star-off" placeholder="請輸入密碼" show-password type="password" clearable v-model="password"></el-input> <script>export default {name: "Input",data() {return {restaurants: [],state1: '',state2: '',name:'xiaochen',price:0.0,username:"",password:"",};},} </script>

3.事件使用

<el-input v-model="username" @blur="aaa" @focus="bbb" @clear="clears" clearable @input="ccc"></el-input> <script>export default {name: "Input",data() {return {restaurants: [],state1: '',state2: '',name:'xiaochen',price:0.0,username:"",password:"",};},methods:{aaa(){console.log('失去焦點');;},bbb(){console.log("獲取焦點");},ccc(value){console.log("改變:"+value);},clears(){console.log("清楚");}}} </script>

4.方法的使用

<h1>方法的使用</h1> <el-input v-model="username" ref="inputs"></el-input> <el-button @click="focusInputs">focus方法</el-button> <el-button @click="blurInputs">blur方法</el-button> <script>export default {name: "Input",data() {return{}},methods:{//調用focus方法focusInputs(){this.$refs.inputs.focus();},//調用失去焦點方法blurInputs(){this.$refs.inputs.blur();}}} </script>

• 在使用組件的方法時需要在對應的組件中加入?ref="組件別名"
• 在調用方法時直接使用?this.$refs.組件別名.方法名()

注意:在elementui中所有組件 都存在 屬性 事件 和方法
屬性: 直接寫在對應的組件標簽上 使用方式:屬性名=屬性值`方式
事件`: 直接使用vue綁定事件方式寫在對應的組件標簽上 使用方式:`@事件名=vue中事件處理函數
方法: 1.在對應組件標簽上使用 ref=組件別名?2. 通過使用this.$refs.組件別名.方法名()進行調用

總結

以上是生活随笔為你收集整理的Element UI组件介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。