ElementUI組件庫怎么使用

ElementUI組件庫怎么使用

目錄

1. 簡介
2. 安裝與配置
   • 使用npm安裝
   • cdn引入">使用CDN引入
   • 配置主題
3. 基本組件
   • Button 按鈕
   • Input 輸入框
   • Form 表單
   • Table 表格
   • Dialog 對話框
   • Message 消息提示
4. 布局組件
   • Layout 布局
   • Container 容器
5. 導航組件
   • Menu 菜單
   • Tabs 標簽頁
   • Breadcrumb 面包屑
6. 數據展示組件
   • Card 卡片
   • Carousel 走馬燈
   • Collapse 折疊面板
7. 反饋組件
   • Loading 加載
   • Notification 通知
   • Popover 彈出框
8. 高級組件
   • Tree 樹形控件
   • Pagination 分頁
   • DatePicker 日期選擇器
9. 自定義主題
10. 國際化
11. 常見問題與解決方案
12. 總結

簡介

ElementUI 是一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫，提供了豐富的組件和功能，幫助開發者快速構建高質量的 Web 應用。ElementUI 的設計風格簡潔、現代，且易于定制，廣泛應用于各種企業級應用中。

本文將詳細介紹 ElementUI 的使用方法，包括安裝與配置、基本組件的使用、布局組件、導航組件、數據展示組件、反饋組件、高級組件、自定義主題、國際化等內容。通過本文的學習，您將能夠熟練使用 ElementUI 構建功能豐富、界面美觀的 Web 應用。

安裝與配置

使用npm安裝

ElementUI 可以通過 npm 進行安裝，適用于使用 Vue CLI 創建的項目。

npm install element-ui --save

安裝完成后，在項目的 main.js 文件中引入 ElementUI 并注冊：

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

Vue.use(ElementUI);

使用CDN引入

如果您不想使用 npm 安裝，也可以通過 CDN 的方式引入 ElementUI。

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

在 HTML 文件中引入后，您可以直接在 Vue 實例中使用 ElementUI 組件。

配置主題

ElementUI 提供了多種主題配置方式，您可以通過修改 SCSS 變量或使用在線主題生成器來自定義主題。

修改 SCSS 變量

在項目中創建一個 element-variables.scss 文件，并覆蓋默認的 SCSS 變量：

/* 修改主題色 */
$--color-primary: #409EFF;

/* 引入 ElementUI 的樣式 */
@import "~element-ui/packages/theme-chalk/src/index";

然后在 main.js 中引入該文件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import './element-variables.scss';

Vue.use(ElementUI);

使用在線主題生成器

ElementUI 提供了一個在線主題生成器，您可以通過該工具生成自定義主題，并下載生成的樣式文件。

ElementUI 主題生成器

基本組件

Button 按鈕

Button 組件是 ElementUI 中最常用的組件之一，用于觸發操作。

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

Input 輸入框

Input 組件用于接收用戶輸入。

<el-input v-model="input" placeholder="請輸入內容"></el-input>

Form 表單

Form 組件用于創建表單，支持表單驗證。

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="用戶名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密碼" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">提交</el-button>
  </el-form-item>
</el-form>

Table 表格

Table 組件用于展示表格數據。

<el-table :data="tableData">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

Dialog 對話框

Dialog 組件用于顯示模態對話框。

<el-button type="text" @click="dialogVisible = true">打開對話框</el-button>

<el-dialog title="提示" :visible.sync="dialogVisible">
  <span>這是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
  </span>
</el-dialog>

Message 消息提示

Message 組件用于顯示全局消息提示。

this.$message('這是一條消息提示');
this.$message.success('這是一條成功消息');
this.$message.warning('這是一條警告消息');
this.$message.error('這是一條錯誤消息');

布局組件

Layout 布局

Layout 組件用于快速創建頁面布局。

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

Container 容器

Container 組件用于創建頁面容器。

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>

導航組件

Menu 菜單

Menu 組件用于創建導航菜單。

<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">處理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作臺</template>
    <el-menu-item index="2-1">選項1</el-menu-item>
    <el-menu-item index="2-2">選項2</el-menu-item>
    <el-menu-item index="2-3">選項3</el-menu-item>
  </el-submenu>
  <el-menu-item index="3">訂單管理</el-menu-item>
</el-menu>

Tabs 標簽頁

Tabs 組件用于創建標簽頁。

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
  <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  <el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
</el-tabs>

Breadcrumb 面包屑

Breadcrumb 組件用于顯示當前頁面的路徑。

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活動管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活動列表</el-breadcrumb-item>
  <el-breadcrumb-item>活動詳情</el-breadcrumb-item>
</el-breadcrumb>

數據展示組件

Card 卡片

Card 組件用于創建卡片式布局。

<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>卡片名稱</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按鈕</el-button>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表內容 ' + o }}
  </div>
</el-card>

Carousel 走馬燈

Carousel 組件用于創建輪播圖。

<el-carousel :interval="5000" arrow="always">
  <el-carousel-item v-for="item in 4" :key="item">
    <h3>{{ item }}</h3>
  </el-carousel-item>
</el-carousel>

Collapse 折疊面板

Collapse 組件用于創建可折疊的面板。

<el-collapse v-model="activeNames" @change="handleChange">
  <el-collapse-item title="一致性 Consistency" name="1">
    <div>與現實生活一致：與現實生活的流程、邏輯保持一致，遵循用戶習慣的語言和概念；</div>
    <div>在界面中一致：所有的元素和結構需保持一致，比如：設計樣式、圖標和文本、元素的位置等。</div>
  </el-collapse-item>
  <el-collapse-item title="反饋 Feedback" name="2">
    <div>控制反饋：通過界面樣式和交互動效讓用戶可以清晰的感知自己的操作；</div>
    <div>頁面反饋：操作后，通過頁面元素的變化清晰地展現當前狀態。</div>
  </el-collapse-item>
  <el-collapse-item title="效率 Efficiency" name="3">
    <div>簡化流程：設計簡潔直觀的操作流程；</div>
    <div>清晰明確：語言表達清晰且表意明確，讓用戶快速理解進而作出決策；</div>
    <div>幫助用戶識別：界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。</div>
  </el-collapse-item>
  <el-collapse-item title="可控 Controllability" name="4">
    <div>用戶決策：根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；</div>
    <div>結果可控：用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。</div>
  </el-collapse-item>
</el-collapse>

反饋組件

Loading 加載

Loading 組件用于顯示加載狀態。

// 開啟加載
const loading = this.$loading({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});

// 關閉加載
loading.close();

Notification 通知

Notification 組件用于顯示全局通知。

this.$notify({
  title: '成功',
  message: '這是一條成功的提示消息',
  type: 'success'
});

Popover 彈出框

Popover 組件用于顯示彈出框。

<el-popover
  placement="top-start"
  title="標題"
  width="200"
  trigger="hover"
  content="這是一段內容,這是一段內容,這是一段內容,這是一段內容。">
  <el-button slot="reference">hover 激活</el-button>
</el-popover>

高級組件

Tree 樹形控件

Tree 組件用于展示樹形結構的數據。

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

Pagination 分頁

Pagination 組件用于分頁顯示數據。

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

DatePicker 日期選擇器

DatePicker 組件用于選擇日期。

<el-date-picker
  v-model="value1"
  type="date"
  placeholder="選擇日期">
</el-date-picker>

自定義主題

ElementUI 提供了多種自定義主題的方式，您可以通過修改 SCSS 變量或使用在線主題生成器來實現。

修改 SCSS 變量

在項目中創建一個 element-variables.scss 文件，并覆蓋默認的 SCSS 變量：

/* 修改主題色 */
$--color-primary: #409EFF;

/* 引入 ElementUI 的樣式 */
@import "~element-ui/packages/theme-chalk/src/index";

然后在 main.js 中引入該文件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import './element-variables.scss';

Vue.use(ElementUI);

使用在線主題生成器

ElementUI 提供了一個在線主題生成器，您可以通過該工具生成自定義主題，并下載生成的樣式文件。

ElementUI 主題生成器

國際化

ElementUI 支持多語言國際化，您可以通過以下方式配置語言：

import Vue from 'vue';
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { locale });

常見問題與解決方案

1. 如何解決 ElementUI 樣式沖突？

在使用 ElementUI 時，可能會遇到樣式沖突的問題?？梢酝ㄟ^以下方式解決：

• 使用 scoped 樣式：在 Vue 組件中使用 scoped 樣式，避免全局樣式污染。
• 自定義類名：為 ElementUI 組件添加自定義類名，避免與其他庫的樣式沖突。

2. 如何自定義 ElementUI 組件的樣式？

可以通過以下方式自定義 ElementUI 組件的樣式：

• 使用 scoped 樣式：在 Vue 組件中使用 scoped 樣式，覆蓋 ElementUI 的默認樣式。
• 修改 SCSS 變量：通過修改 SCSS 變量來自定義主題樣式。

3. 如何解決 ElementUI 組件無法正常顯示的問題？

如果 ElementUI 組件無法正常顯示，可以檢查以下內容：

• 確保正確引入了 ElementUI 的樣式文件。
• 確保 Vue 和 ElementUI 的版本兼容。
• 檢查是否有其他庫或樣式影響了 ElementUI 的顯示。

總結

ElementUI 是一個功能強大、易于使用的 Vue 組件庫，提供了豐富的組件和功能，幫助開發者快速構建高質量的 Web 應用。通過本文的學習，您應該已經掌握了 ElementUI 的基本使用方法，并能夠熟練使用各種組件構建功能豐富、界面美觀的 Web 應用。

在實際開發中，您可以根據項目需求靈活使用 ElementUI 的組件，并通過自定義主題和國際化配置來滿足不同的需求。希望本文能夠幫助您更好地使用 ElementUI，提升開發效率，構建出更加優秀的 Web 應用。