官網：Element

在這里插入圖片描述

文章目錄

Vue整合ElementUI
一. 按鈕組件
二. Link 檔案鏈接組件
三. Layout(柵格) 布局組件的使用
四. Container 布局容器
五. Radio 單選框
六. Checkbox 多選框
七. Input 輸入框
八. Select選擇器組件

Vue整合ElementUI

提示：這里我使用的Vue是2.0版本
在這里插入圖片描述

推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用，

下載elementui的依賴

 npm i element-ui -S

在src下的main.js中指定當前專案中使用elementui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

將elementui注冊到vue實體上

 Vue.use(ElementUI);

在這里插入圖片描述

一. 按鈕組件

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>

2.簡潔按鈕 plain 滑鼠移動上去才會顯示背景顏色
  <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.使用圓角按鈕 round
  <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>

4.圖示按鈕  idco：具體要顯示的圖示
  <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-組件名稱開頭

創建按鈕：<el-button>默認按鈕</el-button>

組件屬性使用

總結：在element中所有的組件的屬性使用都是直接將屬性名=屬性值方式寫在對應的組件標簽上，boolean型別的屬性默認為false可以簡寫一個屬性名字表示為true，

在這里插入圖片描述
示例

    <div>
      <h1>創建簡單的按鈕</h1>   
      <el-button>默認按鈕</el-button>

      <h1>使用按鈕的屬性</h1>
      <el-button type="primary" size="mini" round="true"  loading>primary</el-button>
      <el-button type="primary" size="small" round="true" disabled>primary</el-button>
      <el-button type="primary" size="medium" circle icon="el-icon-delete-solid"></el-button>
    </div>

在這里插入圖片描述
按鈕組的使用

按鈕組的使用就是通過<el-button-group>把多個按鈕包裹起來

 	  <el-button-group>
        <el-button type="primary" plain round icon="el-icon-back"></el-button>
        <el-button type="primary" plain round icon="el-icon-right"></el-button>
      </el-button-group>

在這里插入圖片描述

二. Link 檔案鏈接組件

文字鏈接組件的創建

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

文字鏈接組件屬性的使用
在這里插入圖片描述
示例

  <div>
    <h1>使用文字鏈接組件</h1>
    <el-link type="primary" disabled icon="el-icon-eleme">默認鏈接</el-link>
    <el-link type="success" icon="el-icon-eleme">默認鏈接</el-link>
    <el-link type="warning" icon="el-icon-eleme">默認鏈接</el-link>
    <el-link type="info" :underline="false" icon="el-icon-eleme">默認鏈接</el-link>
  </div>

注意：有些屬性需要通過Vue的系結語法給組件賦值 :underline="false" 否則則會拋出例外

在這里插入圖片描述

三. Layout(柵格) 布局組件的使用

通過基礎的 24 分欄，迅速簡便地創建布局，在element ui中布局組件將頁面劃分為多個行(row)，每行最多分為24欄(列)

使用Layout組件

el-row代表一行，行里面放的自然就是列el-col，span代表柵格占據的列數，是el-col的一個屬性由于它是我們elementui中的一個屬性這個屬性必須要求我們寫數字所以賦值的時候需要帶上：，如果span等于8表示一列占用8份如果超過8份則會換行顯示，

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

<el-row>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
    </el-row>

    <el-row>
      <el-col :span="7"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="8"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="5"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="4"><div style="border: 1px red solid">占用6份</div></el-col>
    </el-row>

    <el-row>
      <el-col :span="3"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="1"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="14"><div style="border: 1px red solid">占用6份</div></el-col>
 </el-row>

在這里插入圖片描述

注意：

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

行屬性的使用
在這里插入圖片描述

    <el-row :gutter="10" tag="span">
      <el-col :span="6" ><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
      <el-col :span="6"><div style="border: 1px red solid">占用6份</div></el-col>
    </el-row>

:gutter=“10”:表示格柵間隔
在這里插入圖片描述
:tag=“span”：表示當前行使用哪種標簽去構建

列屬性的使用

在這里插入圖片描述
偏移屬性offset

   <el-row>
      <el-col :span="12" offset="4"><div style="border: 1px blue solid">我是占用12份</div></el-col>
      <el-col :span="12"><div style="border: 1px blue solid">我是占用12份</div></el-col>
    </el-row>

在這里插入圖片描述
向右移動push

    <el-row>
      <el-col :span="12" push="6"><div style="border: 1px blue solid">我是占用12份</div></el-col>
      <el-col :span="12" push="0"><div style="border: 1px red solid">我是占用12份</div></el-col>
    </el-row>

在這里插入圖片描述

注意以上兩者的區別

四. Container 布局容器

用于布局的容器組件，方便快速搭建頁面的基本結構，

創建一個布局容器

    <el-container>
    
    </el-container>

容器中包含的子元素

<el-header>：頂欄容器，

<el-aside>：側邊欄容器，

<el-main>：主要區域容器，

<el-footer>：底欄容器，

嵌套容器

    <el-container>
      <el-header><div><h1>我是標題</h1></div></el-header>
      <el-container>
        <el-aside><div><h1>我是選單</h1></div></el-aside>
        <el-main><div><h1>我是內容</h1></div></el-main>
      </el-container>
      <el-footer><div><h1>我是底部</h1></div></el-footer>
    </el-container>

在這里插入圖片描述
容器的屬性

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

在這里插入圖片描述

五. Radio 單選框

在一組備選項中進行單選

創建一個單選按鈕

   <el-radio >男</el-radio>
   <el-radio>女</el-radio>

在這里插入圖片描述

此時雖然創建出來兩個單選按鈕但是不能進行選中和取消，這里必須配合我們的value / v-model和label屬性進行使用，

<template>
    <div>
      <h1>radio組件的使用</h1>
      <!--組件創建-->
      <el-radio v-model="label" label="男">男</el-radio>
      <el-radio v-model="label" label="女">女</el-radio>
    </div>
</template>

<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" label="女">女</el-radio>

總結：屬性的使用還是直接寫在對應的組件標簽上以 屬性名 = 屬性值 的方式使用，

Radio事件的使用

在這里插入圖片描述

事件的使用也和屬性的使用是一致的都是寫在對應的組件標簽上
事件在使用時必須使用vue中系結事件方式進行使用如@事件名=事件處理函式(系結在vue組組件中對應函式)

      <el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
      <el-radio v-model="label" @change="aa" name="sex" label="女">女</el-radio>

<script>
    export default {
        methods:{
            aa(){
              console.log(this.label)
            }
        }
    }
</script>

在這里插入圖片描述
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 {
        data(){
          return{
            radio: '3'
          }
       },

        methods:{
            bb(){
              console.log(this.radio)
            }
        }
    }
</script>

在這里插入圖片描述

六. Checkbox 多選框

一組備選項中進行多選

創建Checkbox

  <el-checkbox>北京</el-checkbox>

使用<el-checkbox>標簽去構建我們的checkbox日后我們checkbox的值可以通過v-model進行系結(true|false)，

屬性和事件的使用

 	  <el-checkbox v-model="checked" @change="aa" :true-label=1>北京</el-checkbox>
      <el-checkbox v-model="checked" @change="aa" :true-label=2>洛陽</el-checkbox>
      <el-checkbox v-model="checked" @change="aa" :true-label=3>上海</el-checkbox>
      <el-checkbox v-model="checked" @change="aa" :true-label=4>曹縣</el-checkbox>
      
      <script>
    export default {
        name: "Checkbox",
        data(){
          return{
            checked:1
          }
        },
        methods:{
          aa(){
            console.log("選中節點的true-label為："+this.checked)
          }
        }
    }
</script>

在這里插入圖片描述
復選框組的使用

適用于多個復選框系結到同一個陣列的情景，通過是否勾選來表示這一組選項中選中的項，

 <el-checkbox-group v-model="checkList" @change="aa" :max="2">
      <el-checkbox :label=1>北京</el-checkbox>
      <el-checkbox :label=2>洛陽</el-checkbox>
      <el-checkbox :label=3>上海</el-checkbox>
      <el-checkbox :label=4>曹縣</el-checkbox>
 </el-checkbox-group>
 
<script>
    export default {
        name: "Checkbox",
        data(){
          return{
            checkList:[]
          }
        },
        methods:{
          aa(){
            console.log("選中節點的true-label為："+this.checkList)
          }
        }
    }
</script>

在這里插入圖片描述

七. Input 輸入框

通過滑鼠或鍵盤輸入字符

創建

<el-input> </el-input>

Input屬性的使用

在這里插入圖片描述

 	<el-input type="textarea" v-model="name" disabled show-password></el-input>
    <el-input type="textarea" show-word-limit textarea :maxlength="10000" v-model="age"></el-input>
    <el-input type="text" prefix-icon="el-icon-user" placeholder="請輸入用戶名" v-model="userName"></el-input>
    <el-input type="text" prefix-icon="el-icon-paperclip"></el-input>

在這里插入圖片描述
事件的使用

在這里插入圖片描述

    <el-input v-model="userSex" @input="ccc"></el-input>
   
    <script>
    export default {
        name: "Input",
        methods:{
            ccc(value){
              console.log(value)
            },
        }
    }
</script>

在這里插入圖片描述
方法的使用

在這里插入圖片描述

 <el-button @click="focusInputs">focus方法</el-button>

 <script>
    export default {
        methods:{
            focusInputs(){
              this.$refs.inputs.select();
          }
        }
    }
</script>

在這里插入圖片描述

總結：

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

注意：在elementui中所有組件都存在屬性和方法
屬性：直接寫在對應的組件標簽上使用方式：屬性名=屬性值方式
事件：直接使用vue系結事件方式寫在對應的組件標簽上使用方式：@事件名=vue中事件處理函式
方法：1.在對應組件標簽上使用 ref=組件別名 2.通過使用this.$refs.組件別名.方法名() 進行呼叫，

八. Select選擇器組件

當選項過多時，使用下拉選單展示并選擇內容，

選擇器組件的使用

資料寫死在頁面上

  	 <el-select v-model="cityName">
        <el-option value="北京">北京</el-option>
        <el-option value="北京">上海</el-option>
        <el-option value="北京">澳門</el-option>
        <el-option value="北京">曹縣</el-option>
      </el-select>

注意：要求下拉串列中必須存在option的value屬性值，select中必須使用v-modek進行資料系結

如何動態獲取資料

      <el-select v-model="cityId">
        <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option>
      </el-select>
      
      <script>
    export default {
        data(){
          return{
            cityId:'',
            
            options:[
              {id:'1',name:'研發部'},
              {id:'2',name:'開發部'},
              {id:'3',name:'小賣部'},
              {id:'4',name:'銷售部'},
            ]
          }
        },
    }
</script>

在這里插入圖片描述

事件與屬性的使用


	  <el-select v-model="cityId" @change="aa" multiple clearable>
        <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option>
      </el-select>
      
      <script>
    export default {
        name: "Select",
        data(){
          return{
            cityId:'',
            options:[
              {id:'1',name:'研發部'},
              {id:'2',name:'開發部'},
              {id:'3',name:'小賣部'},
              {id:'4',name:'銷售部'},
            ]
          }
        },

        methods:{
          aa(value){
            console.log(value)
          }
        }

    }
</script>

在這里插入圖片描述
方法的使用

      <el-select v-model="city" ref="selects">
        <el-option v-for="options in options" :label="options.name" :value="options.id" :key="options.id"></el-option>
      </el-select>
      <el-button @click="bbb">測驗方法</el-button>
      
      <script>
    export default {
        name: "Select",
        data(){
          return{
            city:'',

            options:[
              {id:'1',name:'研發部'},
              {id:'2',name:'開發部'},
              {id:'3',name:'小賣部'},
              {id:'4',name:'銷售部'},
            ]
          }
        },

        methods:{
          bbb(){
            this.$refs.selects.focus();
          }
        }

    }
</script>

在這里插入圖片描述

剩下的組件大家可以下去自行練習！感謝觀看！ 在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/292548.html

標籤：其他

上一篇：奉勸剛參加作業的程式員們：寫再多代碼，也不如提升這兩大能力有價值！

下一篇：第16屆智能車競賽雙車接力組—直立車經驗語錄

Vue整合ElementUI，組件使用教程，適合新手

文章目錄

Vue整合ElementUI

一. 按鈕組件

二. Link 檔案鏈接組件

三. Layout(柵格) 布局組件的使用

四. Container 布局容器

五. Radio 單選框

六. Checkbox 多選框

七. Input 輸入框

八. Select選擇器組件