Vue中Element?UI組件庫(kù)使用方法詳解

更新時(shí)間：2024年11月22日 09:16:48 作者：棧老師不回家

ElementUI是Vue的UI框架,提供了豐富的組件,方便快速開(kāi)發(fā)頁(yè)面,本文詳細(xì)介紹了ElementUI的安裝、使用方法以及常見(jiàn)組件的說(shuō)明,包括基礎(chǔ)組件、布局組件、選擇框組件、輸入框組件、下拉框組件等,需要的朋友可以參考下

一、引言

官方網(wǎng)站，element.eleme.cn

Element UI 是 Vue 的 UI 框架，是一個(gè)網(wǎng)站快速成型的工具和桌面端的組件庫(kù)。該框架中提供的全部都是封裝好的組件，方便我們快速地開(kāi)發(fā)頁(yè)面，底層其實(shí)就是對(duì) vue 的封裝。

二、安裝并使用

1. 安裝

① 先創(chuàng)建一個(gè)腳手架項(xiàng)目

② 下載 element-ui 依賴(lài)

npm i element-ui -S

③ 在 main.js 中引入 Element

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

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Vue.use(ElementUI) 聲明在 Vue 腳手架中使用 ElementUI。

2. 使用

① 所有的 UI 都在這里，使用的時(shí)候直接在官網(wǎng)的組件里面去找就可以了。

② 復(fù)制代碼，并粘貼到自己的 div 中。

Element UI 中所有的組件都是以 el-組件名開(kāi)頭的，所有的屬性都寫(xiě)在組件標(biāo)簽上，組件屬性可以在官方文檔中查詢！

三、常見(jiàn)組件說(shuō)明

1. 基礎(chǔ)組件

<!--按鈕-->
<el-button type="success" size="medium" plain icon="el-icon-loading"></el-button>

<!--鏈接-->
<el-link target="_blank"  rel="external nofollow"  underline></el-link>

2. 布局組件

通過(guò)基礎(chǔ)的 24 分欄（柵格），迅速簡(jiǎn)便地創(chuàng)建布局。在 Element UI 中布局組件將頁(yè)面劃分為多個(gè)行 row，每行最多分為 24 列 col。

注意區(qū)分行的屬性和列的屬性，它們是不一樣的！

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
}
</script>

<style>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

offset 用于設(shè)置柵格的偏移量，指定柵格從第幾列起開(kāi)始排列，屬性值為柵格空開(kāi)的列數(shù)。push 屬性用于指定柵格右移的列數(shù)，它和 offset 有點(diǎn)像，不過(guò)它的移動(dòng)并不會(huì)影響到后面柵格的位置（碰到后面的柵格，那就直接壓上去重合），而 offset 的移動(dòng)則會(huì)推著后面的柵格往后走（碰到后面的柵格，直接擠走）。

3. 布局容器

在實(shí)際開(kāi)發(fā)中，需要將布局組件放到布局容器中去使用，布局容器 Container 可以幫助我們快速搭建頁(yè)面的基本結(jié)構(gòu)。

<el-container>：外層容器。當(dāng)子元素中包含 <el-header> 或 <el-footer> 時(shí)，全部子元素會(huì)垂直上下排列，否則會(huì)水平左右排列。

<el-header>：頂欄容器。

<el-aside>：側(cè)邊欄容器。

<el-main>：主要區(qū)域容器。

<el-footer>：底欄容器。

以上組件采用了 flex 布局，使用前請(qǐng)確定目標(biāo)瀏覽器是否兼容。此外，el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container，el-container 可以嵌套使用，嵌套是為了把多個(gè)模塊放在一起。

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-container>
          <el-main>Main</el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

4. 選擇框組件

① 單選框

<!--Radio 單選框事件的使用：@change = "處理函數(shù)名"-->
<el-radio v-model="label" label="1" border name="sex" size="small" @change="fn">男</el-radio>
<el-radio v-model="label" label="2" border name="sex" size="small" @change="fn">女</el-radio>

<!--單選框組-->
<el-radio-group v-model="radio">
    <el-radio :label="1">備選1</el-radio>
    <el-radio :label="2">備選2</el-radio>
    <el-radio :label="3">備選3</el-radio>
</el-radio-group>

data() {
    return {
        label: '2',
        radio: '3'
    }
},
methods: {
	fn() {
		alert()
	}
}

v-model 中的屬性值與標(biāo)簽屬性 label 的屬性值相對(duì)應(yīng)時(shí)，就會(huì)選中當(dāng)前按鈕，label 里面的值必須是字符串，所以 data 中定義的所有數(shù)據(jù)，都必須加引號(hào)！

② 多選框

&lt;template&gt;
  &lt;div&gt;
    &lt;el-checkbox-group v-model="checkList"&gt;
      &lt;el-checkbox label="復(fù)選框 A"&gt;&lt;/el-checkbox&gt;
      &lt;el-checkbox label="復(fù)選框 B"&gt;&lt;/el-checkbox&gt;
      &lt;el-checkbox label="復(fù)選框 C"&gt;&lt;/el-checkbox&gt;
      &lt;el-checkbox label="禁用" disabled&gt;&lt;/el-checkbox&gt;
      &lt;el-checkbox label="選中且禁用" disabled&gt;&lt;/el-checkbox&gt;
    &lt;/el-checkbox-group&gt;
  &lt;/div&gt;
&lt;/template&gt;

data() {
  return {
    checkList: ['選中且禁用', '復(fù)選框 A']
  }
}

多選框 label 選中狀態(tài)的值，只有在 checkbox-group 或者綁定對(duì)象為 array 時(shí)才可以生效！

5. 輸入框組件

<el-input v-model="username" @blur="blur" @focus="focus"></el-input>

給 A 組件加上 ref=“組件別名” 屬性，當(dāng)別的組件想調(diào)用 A 組件的方法時(shí)，可直接使用 this.$ref.組件別名.方法名() 進(jìn)行調(diào)用！

<template>
  <div>
    <el-input v-model="username" ref="inputs"></el-input>
    
    <el-button @click="focusInputs">調(diào)用el-input的focus方法</el-button>
    <el-button @click="blurInputs">調(diào)用el-input的blur方法</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    focusInputs() {
      this.$refs.inputs.focus()
    },
    blurInputs() {
      this.$refs.inputs.blur()
    }
  }
}
</script>

6. 下拉框組件

<template>
  <el-select v-model="value" clearable placeholder="請(qǐng)選擇" multiple>
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          id: '選項(xiàng)1',
          name: '黃金糕'
        }, {
          id: '選項(xiàng)2',
          name: '雙皮奶'
        }, {
          id: '選項(xiàng)3',
          name: '蚵仔煎'
        }],
        value: ''
      }
    }
  }
</script>

注意點(diǎn)：
① v-model=“value”，可以綁定下拉框選中的值；
② :label，下拉框文本；
③ :value，一般為 item 的 id；
④ :key，一般為 item 的 id。

7. 日期選擇器

<template>
  <div class="block">
    <span class="demonstration">默認(rèn)</span>
    <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="開(kāi)始日期"
      end-placeholder="結(jié)束日期">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: ''
      }
    }
  }
</script>

8. 上傳組件

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">將文件拖到此處，或<em>點(diǎn)擊上傳</em></div>
  <div class="el-upload__tip" slot="tip">只能上傳jpg/png文件，且不超過(guò)500kb</div>
</el-upload>

9. 表單組件

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動(dòng)名稱(chēng)">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活動(dòng)區(qū)域">
    <el-select v-model="form.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域">
      <el-option label="區(qū)域一" value="shanghai"></el-option>
      <el-option label="區(qū)域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活動(dòng)時(shí)間">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="選擇時(shí)間" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即時(shí)配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活動(dòng)性質(zhì)">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動(dòng)" name="type"></el-checkbox>
      <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊資源">
    <el-radio-group v-model="form.resource">
      <el-radio label="線上品牌商贊助"></el-radio>
      <el-radio label="線下場(chǎng)地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動(dòng)形式">
    <el-input type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即創(chuàng)建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

10. 警告組件

<template>
  <div>
    <el-alert
    title="成功提示的文案"
    type="success">
  </el-alert>
  <el-alert
    title="消息提示的文案"
    type="info">
  </el-alert>
  <el-alert
    title="警告提示的文案"
    type="warning">
  </el-alert>
  <el-alert
    title="錯(cuò)誤提示的文案"
    type="error">
  </el-alert>
  </div>
</template>

11. 提示組件

<template>
  <el-button :plain="true" @click="open1">消息</el-button>
  <el-button :plain="true" @click="open2">成功</el-button>
  <el-button :plain="true" @click="open3">警告</el-button>
  <el-button :plain="true" @click="open4">錯(cuò)誤</el-button>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$message({
          showClose: true,
          message: '這是一條消息提示'
        });
      },

      open2() {
        this.$message({
          showClose: true,
          message: '恭喜你，這是一條成功消息',
          type: 'success'
        });
      },

      open3() {
        this.$message({
          showClose: true,
          message: '警告哦，這是一條警告消息',
          type: 'warning'
        });
      },

      open4() {
        this.$message({
          showClose: true,
          message: '錯(cuò)了哦，這是一條錯(cuò)誤消息',
          type: 'error'
        });
      }
    }
  }
</script>

12. 表格組件

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

總結(jié)

到此這篇關(guān)于Vue中Element UI組件庫(kù)使用方法詳解的文章就介紹到這了,更多相關(guān)Vue Element UI組件庫(kù)詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中Element?UI組件庫(kù)使用方法詳解

目錄

一、引言

二、安裝并使用

1. 安裝

2. 使用

三、常見(jiàn)組件說(shuō)明

1. 基礎(chǔ)組件

2. 布局組件

3. 布局容器

4. 選擇框組件

5. 輸入框組件

6. 下拉框組件

7. 日期選擇器

8. 上傳組件

9. 表單組件

10. 警告組件

11. 提示組件

12. 表格組件

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中Element?UI組件庫(kù)使用方法詳解

目錄

一、引言

二、安裝并使用

1. 安裝

2. 使用

三、常見(jiàn)組件說(shuō)明

1. 基礎(chǔ)組件

2. 布局組件

3. 布局容器

4. 選擇框組件

5. 輸入框組件

6. 下拉框組件

7. 日期選擇器

8. 上傳組件

9. 表單組件

10. 警告組件

11. 提示組件

12. 表格組件

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、引言

三、常見(jiàn)組件說(shuō)明