Vue中Element?UI組件庫使用方法詳解

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

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

一、引言

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

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

二、安裝并使用

1. 安裝

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

② 下載 element-ui 依賴

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-組件名開頭的，所有的屬性都寫在組件標(biāo)簽上，組件屬性可以在官方文檔中查詢！

三、常見組件說明

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. 布局組件

通過基礎(chǔ)的 24 分欄（柵格），迅速簡便地創(chuàng)建布局。在 Element UI 中布局組件將頁面劃分為多個(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è)置柵格的偏移量，指定柵格從第幾列起開始排列，屬性值為柵格空開的列數(shù)。push 屬性用于指定柵格右移的列數(shù)，它和 offset 有點(diǎn)像，不過它的移動并不會影響到后面柵格的位置（碰到后面的柵格，那就直接壓上去重合），而 offset 的移動則會推著后面的柵格往后走（碰到后面的柵格，直接擠走）。

3. 布局容器

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

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

<el-header>：頂欄容器。

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

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

<el-footer>：底欄容器。

以上組件采用了 flex 布局，使用前請確定目標(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 的屬性值相對應(yīng)時(shí)，就會選中當(dāng)前按鈕，label 里面的值必須是字符串，所以 data 中定義的所有數(shù)據(jù)，都必須加引號！

② 多選框

&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 或者綁定對象為 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="請選擇" 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="開始日期"
      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文件，且不超過500kb</div>
</el-upload>

9. 表單組件

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活動名稱">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活動區(qū)域">
    <el-select v-model="form.region" placeholder="請選擇活動區(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="活動時(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="活動性質(zhì)">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
      <el-checkbox label="地推活動" name="type"></el-checkbox>
      <el-checkbox label="線下主題活動" 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="線下場地免費(fèi)"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活動形式">
    <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組件庫使用方法詳解的文章就介紹到這了,更多相關(guān)Vue Element UI組件庫詳解內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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

Vue中Element?UI組件庫使用方法詳解

目錄

一、引言

二、安裝并使用

1. 安裝

2. 使用

三、常見組件說明

1. 基礎(chǔ)組件

2. 布局組件

3. 布局容器

4. 選擇框組件

5. 輸入框組件

6. 下拉框組件

7. 日期選擇器

8. 上傳組件

9. 表單組件

10. 警告組件

11. 提示組件

12. 表格組件

總結(jié)

相關(guān)文章

最新評論

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

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

常用在線小工具

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

Vue中Element?UI組件庫使用方法詳解

目錄

一、引言

二、安裝并使用

1. 安裝

2. 使用

三、常見組件說明

1. 基礎(chǔ)組件

2. 布局組件

3. 布局容器

4. 選擇框組件

5. 輸入框組件

6. 下拉框組件

7. 日期選擇器

8. 上傳組件

9. 表單組件

10. 警告組件

11. 提示組件

12. 表格組件

總結(jié)

相關(guān)文章

最新評論

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

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

常用在線小工具

一、引言

二、安裝并使用

三、常見組件說明