Element-plus安裝及基礎(chǔ)組件使用詳解

更新時(shí)間：2024年09月29日 09:40:12 作者：一雨方知深秋

ElementPlus是一個(gè)基于Vue3的UI組件庫(kù),旨在提供豐富的HTML元素封裝,以簡(jiǎn)化前端開發(fā),主要特點(diǎn)包括預(yù)定義樣式、事件處理、易用性等,為開發(fā)者提供了一致且美觀的用戶界面,同時(shí)支持按需導(dǎo)入,提高項(xiàng)目效率,感興趣的朋友一起看看吧

Element Plus 是一個(gè)基于 Vue 3 的組件庫(kù)，提供了一系列 UI 組件（如按鈕、表格、對(duì)話框等），可以幫助快速構(gòu)建用戶界面。那么提供了該組件跟我平常直接在<template></template>標(biāo)簽中直接寫<button></button>標(biāo)簽來創(chuàng)建按鈕有什么區(qū)別？
Element Plus 組件實(shí)際上是對(duì)原生 HTML 和 CSS 的封裝，它提供了一系列預(yù)定義的樣式和功能，使得開發(fā)者可以更輕松地構(gòu)建一致且美觀的用戶界面

封裝：Element Plus 組件將原生 HTML 元素（如按鈕、表格等）進(jìn)行了封裝，增加了豐富的樣式和功能選項(xiàng)。

樣式與一致性：組件自帶的樣式確保了在不同設(shè)備和瀏覽器上的一致性，減少了樣式調(diào)整的復(fù)雜性。

事件處理：盡管組件庫(kù)提供了許多內(nèi)置功能，事件處理仍然需要使用 JavaScript 進(jìn)行定義和處理。這與原生 HTML 是一樣的。

使用方便：通過使用組件，開發(fā)者可以更快地實(shí)現(xiàn)復(fù)雜的功能，而不必從頭開始設(shè)計(jì)和實(shí)現(xiàn)所有的樣式和行為。

一.安裝

使用包管理器：

# NPM

npm install element-plus --save

# Yarn

yarn add element-plus

# pnpm

pnpm install element-plus

如果網(wǎng)絡(luò)環(huán)境不好，建議使用中國(guó)npm鏡像:

設(shè)置清華大學(xué)鏡像并安裝element-plus：

npm config set registry https://mirrors.tuna.tsinghua.edu.cn/npm/
npm install element-plus

中國(guó)科學(xué)技術(shù)大學(xué)(USTC)鏡像：

npm config set registry https://mirrors.ustc.edu.cn/npm/
npm install element-plus

淘寶鏡像：
npm config set registry https://registry.npm.taobao.org
npm install element-plus

使用cnpm 作為npm 的替代工具，自動(dòng)使用淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install element-plus

如果想要切換回npm官方源

npm config set registry https://registry.npmjs.org

瀏覽器直接引入：

unpkg:

<head>

<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

<script src="//unpkg.com/vue@3"></script>

<script src="//unpkg.com/element-plus"></script>
</head>

jsDelivr:

<head>

<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>

<script src="//cdn.jsdelivr.net/npm/vue@3"></script>

<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>

二.在項(xiàng)目中使用Element Plus

引入：
（volar適用于ts,而對(duì)于js，使用vetur)

完整引入（對(duì)打包后的文件大小不在乎，使用完整導(dǎo)入更方便）

// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus' //從element-plus庫(kù)中導(dǎo)入ElementPlus對(duì)象，該對(duì)象主要是庫(kù)的主要功能或組件集合，可在vue應(yīng)用中使用
import 'element-plus/dist/index.css' //引入樣式
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus) //注冊(cè)庫(kù)，所有Element Plus組件都可以在應(yīng)用中使用，在所有組件中都能使用
app.mount('#app')

按需導(dǎo)入：
安裝額外插件來導(dǎo)入要使用的組件

安裝 unplugin-vue-components 和 unplugin-auto-import

npm install -D unplugin-vue-components unplugin-auto-import

將下面代碼插入vite配置文件vite.config.js中

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    vue(), //添加vue插件，千萬不要把它忘記了，報(bào)一堆錯(cuò)，瀏覽器一片紅
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

作用：

自動(dòng)導(dǎo)入：使用 unplugin-auto-import，可以在代碼中直接使用 Element Plus 的 API，而無需手動(dòng)導(dǎo)入，這樣可以簡(jiǎn)化代碼并提高開發(fā)效率。

自動(dòng)注冊(cè)組件：通過 unplugin-vue-components 和 ElementPlusResolver，可以自動(dòng)注冊(cè)所有使用的 Element Plus 組件，避免在每個(gè)文件中重復(fù)注冊(cè)，簡(jiǎn)化組件管理。

提升開發(fā)體驗(yàn)：減少樣板代碼，提高代碼整潔性和可維護(hù)性，使開發(fā)者能更專注于業(yè)務(wù)邏輯。
Element Plus 的 API 包括組件、屬性、事件和方法等。以下是一些常見的 Element Plus API：
常見組件
1.基礎(chǔ)組件：

Button：按鈕組件，支持多種樣式和尺寸。
Input：輸入框組件，支持文本輸入和驗(yàn)證。
Select：下拉選擇框組件，支持多選和搜索。

2.布局組件：

Container：用于布局的容器組件，可以設(shè)置頂部、底部、側(cè)邊欄等。
Row/Col：柵格布局組件，用于快速創(chuàng)建響應(yīng)式布局。

3.表單組件：

Form：表單組件，支持表單驗(yàn)證。
Checkbox、Radio、Switch：用于選擇的各種組件。

4.反饋組件：

Message：全局消息提示組件。
Notification：通知提示組件。

5.數(shù)據(jù)展示組件：

Table：表格組件，支持排序、篩選和分頁(yè)。
Pagination：分頁(yè)組件，用于數(shù)據(jù)分頁(yè)展示。

組件的屬性和方法：
屬性：每個(gè)組件都有一系列可配置的屬性，例如：

type、size：用于設(shè)置按鈕的類型和尺寸。
placeholder：用于設(shè)置輸入框的占位符文本。

事件：組件通常會(huì)提供事件監(jiān)聽，例如：

click：按鈕的點(diǎn)擊事件。
change：輸入框內(nèi)容變化時(shí)觸發(fā)的事件。

方法：某些組件提供的方法，可以在實(shí)例中調(diào)用，例如：

show()：顯示模態(tài)框。
hide()：隱藏模態(tài)框。

全局配置

在引入ElementPlus時(shí)，可以傳入一個(gè)包含size和zIndex屬性的全局配置對(duì)象。size用于設(shè)置表單組建的默認(rèn)尺寸，zIndex用于設(shè)置彈出組件的層級(jí)，zIndex的默認(rèn)值為2000

完整引入（上邊注冊(cè)庫(kù)僅僅是app.use(ElementPlus))

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入：

<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <app />
  </el-config-provider>
</template>
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>

三.組件

基礎(chǔ)組件：

button按鈕：

button屬性：

1.type用來指定按鈕內(nèi)的背景顏色，但是按鈕內(nèi)的文字顏色是白色

<div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>

2.plain屬性確定是否為樸素按鈕，設(shè)置了樸素按鈕之后，僅顯示邊框顏色和透明背景色

<div class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button> <!--有顏色的邊框和文本，背景沒有顏色-->
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </div>

3.round 按鈕是否為圓角樣式

  <div class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </div>

4.circle 是否是圓形按鈕 icon 圖標(biāo)，前面有冒號(hào)是動(dòng)態(tài)綁定，沒有是靜態(tài)

  <div>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </div>

5.disabled 定義按鈕是否禁用

<template>
  <div class="mb-4">
    <el-button disabled>Default</el-button>
    <el-button type="primary" disabled>Primary</el-button>
    <el-button type="success" disabled>Success</el-button>
    <el-button type="info" disabled>Info</el-button>
    <el-button type="warning" disabled>Warning</el-button>
    <el-button type="danger" disabled>Danger</el-button>
  </div>
  <div>
    <el-button plain disabled>Plain</el-button>
    <el-button type="primary" plain disabled>Primary</el-button>
    <el-button type="success" plain disabled>Success</el-button>
    <el-button type="info" plain disabled>Info</el-button>
    <el-button type="warning" plain disabled>Warning</el-button>
    <el-button type="danger" plain disabled>Danger</el-button>
  </div>
</template>

6.鏈接按鈕 link

<template>
  <p>Basic link button</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link
    >
      {{ button.text }}
    </el-button>
  </div>
  <p>Disabled link button</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      link  <!--鏈接按鈕-->
      disabled
    >
      {{ button.text }}
    </el-button>
  </div>
</template>
<script setup lang="ts">
const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const
</script>

7.文字按鈕沒有邊框和背景色的按鈕

<template>
  <p>Basic text button</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text   
    >
      {{ button.text }}
    </el-button>
  </div>
  <p>Background color always on</p>
  <div class="mb-4">
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text 
      bg
    >
      {{ button.text }}
    </el-button>
  </div>
  <p>Disabled text button</p>
  <div>
    <el-button
      v-for="button in buttons"
      :key="button.text"
      :type="button.type"
      text
      disabled
    >
      {{ button.text }}
    </el-button>
  </div>
</template>
<script setup lang="ts">
const buttons = [
  { type: '', text: 'plain' },
  { type: 'primary', text: 'primary' },
  { type: 'success', text: 'success' },
  { type: 'info', text: 'info' },
  { type: 'warning', text: 'warning' },
  { type: 'danger', text: 'danger' },
] as const
</script>

8.圖標(biāo)按鈕（要是圖標(biāo)里不需要加文字，那么直接是單標(biāo)簽）

<template>
  <div>
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
    <el-button type="primary" :icon="Search">Search</el-button>
    <el-button type="primary">
      Upload<el-icon class="el-icon--right"><Upload /></el-icon>
    </el-button>
  </div>
</template>
<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
</script>

9.按鈕組（el-button-group）

<template>
  <el-button-group>
    <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
    <el-button type="primary">
      Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button>
  </el-button-group>
  <el-button-group class="ml-4">
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
  </el-button-group>
</template>
<script setup lang="ts">
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
} from '@element-plus/icons-vue'
</script>

10.加載狀態(tài)按鈕

<template>
  <el-button type="primary" loading>Loading</el-button>
  <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>
  <el-button type="primary" loading>
    <template #loading>
      <div class="custom-loading">
        <svg class="circular" viewBox="-10, -10, 50, 50">
          <path
            class="path"
            d="
            M 30 15
            L 28 17
            M 25.61 25.61
            A 15 15, 0, 0, 1, 15 30
            A 15 15, 0, 1, 1, 27.99 7.5
            L 15 15
          "
            style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
          />
        </svg>
      </div>
    </template>
    Loading
  </el-button>
</template>
<script lang="ts" setup>
import { Eleme } from '@element-plus/icons-vue'
</script>
<style scoped>
.el-button .custom-loading .circular {
  margin-right: 6px;
  width: 18px;
  height: 18px;
  animation: loading-rotate 2s linear infinite;
}
.el-button .custom-loading .circular .path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-button-text-color);
  stroke-linecap: round;
}
</style>

11.調(diào)整尺寸 size ="small" size="large"

<template>
  <div class="flex flex-wrap items-center mb-4">
    <el-button size="large">Large</el-button>
    <el-button>Default</el-button>
    <el-button size="small">Small</el-button>
    <el-button size="large" :icon="Search">Search</el-button>
    <el-button :icon="Search">Search</el-button>
    <el-button size="small" :icon="Search">Search</el-button>
  </div>
  <div class="flex flex-wrap items-center mb-4">
    <el-button size="large" round>Large</el-button>
    <el-button round>Default</el-button>
    <el-button size="small" round>Small</el-button>
    <el-button size="large" :icon="Search" round>Search</el-button>
    <el-button :icon="Search" round>Search</el-button>
    <el-button size="small" :icon="Search" round>Search</el-button>
  </div>
  <div class="flex flex-wrap items-center">
    <el-button :icon="Search" size="large" circle />
    <el-button :icon="Search" circle />
    <el-button :icon="Search" size="small" circle />
  </div>
</template>
<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
</script>

12.自定義元素標(biāo)簽 tag="div"d

<template>
  <el-button>button</el-button>
  <el-button tag="div" role="button" tabindex="0">div</el-button>
  <el-button
    type="primary"
    tag="a"
     rel="external nofollow" 
    target="_blank"
    rel="noopener noreferrer"
  >
    a
  </el-button>
</template>

13.自定義顏色（isDark: 這是一個(gè)響應(yīng)式變量，通常用于指示當(dāng)前主題是“深色模式（Dark Mode）”還是“淺色模式（Light Mode））

<script lang="ts" setup>
import { isDark } from '~/composables/dark'
</script>
<template>
  <div>
    <el-button color="#626aef" :dark="isDark">Default</el-button>
    <el-button color="#626aef" :dark="isDark" plain>Plain</el-button>
    <el-button color="#626aef" :dark="isDark" disabled>Disabled</el-button>
    <el-button color="#626aef" :dark="isDark" disabled plain>
      Disabled Plain
    </el-button>
  </div>
</template>

button插槽：

button方法：

<el-button>：?jiǎn)蝹€(gè)按鈕，用于執(zhí)行一個(gè)特定的操作。
<el-button-group>：包含多個(gè)按鈕，通常用于一組相關(guān)的操作，比如多種選擇或工具欄。
使用 button-group 時(shí)，按鈕之間的間距和樣式會(huì)自動(dòng)調(diào)整，視覺上更整齊

示例：

<template>
  <el-button-group>
    <el-button type="primary">按鈕1</el-button>
    <el-button>按鈕2</el-button>
    <el-button type="success">按鈕3</el-button>
  </el-button-group>
</template>

三個(gè)按鈕被包裹在 button-group 中，形成了一個(gè)統(tǒng)一的操作區(qū)域。

Border邊框：

邊框樣式：（實(shí)線和虛線）

border-top:1px solid var(--el-border-color)

<script setup>
</script>
  <template>
  <table class="demo-border">
    <tbody>
      <tr>
        <td class="text">Name</td>
        <td class="text">Thickness</td>
        <td class="line">Demo</td>
      </tr>
      <tr>
        <td class="text">Solid</td>
        <td class="text">1px</td>
        <td class="line">
          <!-- <div /> -->
           <div></div>
        </td>
      </tr>
      <tr>
        <td class="text">Dashed</td>
        <td class="text">2px</td>
        <td class="line">
          <div class="dashed" ></div>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<style scoped>
.demo-border .text {
  width: 15%;
}
.demo-border .line {
  width: 70%;
}
.demo-border .line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color);  /*上邊框，--el-border-color是element-plus中定義的一個(gè)css變量，是個(gè)默認(rèn)顏色值*/
}
.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}
</style>

圓角樣式：(el-border-radius)

<script setup>
</script>
<template>
  <!-- el-row創(chuàng)建行，gutter屬性設(shè)置外邊距，即列與列之間的間距 。: 前綴表示這是一個(gè)動(dòng)態(tài)綁定，意味著 gutter 的值來自 Vue 的數(shù)據(jù)或計(jì)算屬性-->
  <el-row :gutter="12" class="demo-radius"> 
    <el-col
      v-for="(radius, i) in radiusGroup"
      :key="i"
      :span="6"
      :xs="{ span: 12 }"
    >
      <div class="title">{{ radius.name }}</div>
      <div class="value">
        <code>
          border-radius:
          {{
            radius.type
              ? useCssVar(`--el-border-radius-${radius.type}`)
              : '"0px"'
          }}
        </code>
      </div>
      <div
        class="radius"
        :style="{
          borderRadius: radius.type
            ? `var(--el-border-radius-${radius.type})`  <!----el-border-radius-->
            : '',
        }"
      />
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useCssVar } from '@vueuse/core'
const radiusGroup = ref([
  {
    name: 'No Radius',
    type: '',
  },
  {
    name: 'Small Radius',
    type: 'small',
  },
  {
    name: 'Large Radius',
    type: 'base',
  },
  {
    name: 'Round Radius',
    type: 'round',
  },
])
</script>
<style scoped>
.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  margin: 10px 0;
}
.demo-radius .value {
  color: var(--el-text-color-primary);
  font-size: 16px;
  margin: 10px 0;
}
.demo-radius .radius {
  height: 40px;
  width: 70%;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin-top: 20px;
}
</style>

陰影：（el-box-shadow)

<template>
  <div class="flex justify-between items-center flex-wrap">
    <div
      v-for="(shadow, i) in shadowGroup"
      :key="i"
      class="flex flex-col justify-center items-center"
      m="auto"
      w="46"
    >
      <div
        class="inline-flex"
        h="30"
        w="30"
        m="2"
        :style="{
          boxShadow: `var(${getCssVarName(shadow.type)})`,
        }"
      />
      <span p="y-4" class="demo-shadow-text" text="sm">
        {{ shadow.name }}
      </span>
      <code text="xs">
        {{ getCssVarName(shadow.type) }}
      </code>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const shadowGroup = ref([
  {
    name: 'Basic Shadow',
    type: '',
  },
  {
    name: 'Light Shadow',
    type: 'light',
  },
  {
    name: 'Lighter Shadow',
    type: 'lighter',
  },
  {
    name: 'Dark Shadow',
    type: 'dark',
  },
])
const getCssVarName = (type: string) => {     
  return `--el-box-shadow${type ? '-' : ''}${type}`    //el-box-shadow
}
</script>

color色彩：Element Plus為了避免視覺傳達(dá)差異，使用一套特定的調(diào)色板來規(guī)定顏色，為搭建的產(chǎn)品提供一致的外觀視覺感受

主色

中性色
中性色用于文本、背景和邊框顏色。通過運(yùn)用不同的中性色，來表現(xiàn)層次結(jié)構(gòu)

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>：底欄容器。
常見的頁(yè)面布局
1.container包裹header和main

<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color:#D4D7DE;color:red">Header</el-header>
      <el-main style="background:#409EFF;color:blask">Main</el-main>
    </el-container>
  </div>
</template>

2.container包裹header和main和footer

<template>
  <div class="common-layout">
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

3.container包裹aside和main，不過要指定側(cè)邊欄width屬性，明確指定側(cè)邊欄的寬度，從而確保整體布局的一致性和可預(yù)測(cè)性
用style設(shè)置容器背景色

height在<el-container>標(biāo)簽無效

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" style="background-color:pink">Aside</el-aside>
      <el-main style="background-color:red">Main</el-main>
    </el-container>
  </div>
</template>

4.三個(gè)部分，大container包裹header和小container，小container包裹aside和main

<template>
  <div class="common-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-container>
  </div>
</template>

5.大container包裹所有，中container包裹aside,main,footer，小container包裹main和footer

<template>
  <div class="common-layout">
    <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>

lcon圖標(biāo)
Element Plus提供了一套常用的圖標(biāo)集合（如果想要直接使用，需要全局注冊(cè)組件）

安裝

使用包管理器

# NPM
npm install @element-plus/icons-vue

# Yarn
yarn add @element-plus/icons-vue

# pnpm
pnpm install @element-plus/icons-vue
法1：注冊(cè)所有圖標(biāo)

需要從@element-plus/icons-vue 中導(dǎo)入所有圖標(biāo)并進(jìn)行全局注冊(cè)

Object.entries(ElementPlusIconsVue): 獲取 ElementPlusIconsVue 對(duì)象中所有的鍵值對(duì)（圖標(biāo)組件）。

for (const [key, component] of ...): 遍歷每個(gè)圖標(biāo)的鍵（名稱）和對(duì)應(yīng)的組件。

app.component(key, component): 將每個(gè)圖標(biāo)組件以其名稱注冊(cè)到 Vue 應(yīng)用中，使得在模板中可以直接使用這些圖標(biāo)。

這樣，開發(fā)者就可以方便地在應(yīng)用中使用 ElementPlus 提供的圖標(biāo)組件

// main.js
// 如果您正在使用CDN引入，請(qǐng)刪除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

法2：直接通過瀏覽器的HTML標(biāo)簽導(dǎo)入Element Plus，然后就能使用全局變量ElementPlusIconsVue
根據(jù)不同的 CDN 提供商有不同的引入方式，根據(jù)不同的 CDN 提供商有不同的引入方式，我們?cè)谶@里以 unpkg 和 jsDelivr 舉例
使用unpkg:
<script src="//unpkg.com/@element-plus/icons-vue"></script>
使用jsDelivr:

<!-- 使用 el-icon 為 SVG 圖標(biāo)提供屬性 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者獨(dú)立使用它，不從父級(jí)獲取屬性 -->
    <Edit />
  </div>
</template>
<!--<Edit /> 是一個(gè) SVG 圖標(biāo)組件，通常來自 Element Plus 圖標(biāo)庫(kù)。它用于在界面中顯示一個(gè)編輯圖標(biāo)。代碼中的 <el-icon> 組件用來包裹這個(gè)圖標(biāo)，并通過 :size 和 :color 屬性動(dòng)態(tài)設(shè)置圖標(biāo)的大小和顏色。如果不使用 <el-icon> 包裹，<Edit /> 圖標(biāo)仍然可以獨(dú)立顯示，但會(huì)使用默認(rèn)樣式。-->

結(jié)合el-icon使用

<template>
  <p>
    with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2
    seconds, you can also override this
  </p>
  <el-icon :size="20">
    <Edit />
  </el-icon>
  <el-icon color="#409efc" class="no-inherit">
    <Share />
  </el-icon>
  <el-icon>
    <Delete />
  </el-icon>
  <el-icon class="is-loading">
    <Loading />
  </el-icon>
  <el-button type="primary">
    <el-icon style="vertical-align: middle">
      <Search />
    </el-icon>
    <span style="vertical-align: middle"> Search </span>
  </el-button>
</template>

直接使用svg圖標(biāo)

<template>
  <div style="font-size: 20px">
    <!-- 由于SVG圖標(biāo)默認(rèn)不攜帶任何屬性 -->
    <!-- 你需要直接提供它們 -->
    <Edit style="width: 1em; height: 1em; margin-right: 8px" />
    <Share style="width: 1em; height: 1em; margin-right: 8px" />
    <Delete style="width: 1em; height: 1em; margin-right: 8px" />
    <Search style="width: 1em; height: 1em; margin-right: 8px" />
  </div>
</template>

Layout布局

通過基礎(chǔ)的24分欄，迅速簡(jiǎn)便創(chuàng)建布局

組件默認(rèn)使用 Flex 布局，不需要手動(dòng)設(shè)置 type="flex"。

請(qǐng)注意父容器避免使用 inline 相關(guān)樣式，會(huì)導(dǎo)致組件寬度不能撐滿。
1.el-row 行

el-col 列
<el-col> 組件的 :span 屬性用于定義列的寬度

<template>
  <el-row>
    <el-col :span="24"><div class="grid-content ep-bg-purple-dark"></div></el-col>
  </el-row>
  <el-row>
    <el-col :span="12"><div class="grid-content ep-bg-purple"></div></el-col>
    <el-col :span="12"><div class="grid-content ep-bg-purple-light"></div></el-col>
  </el-row>
  <el-row>
    <el-col :span="8"><div class="grid-content ep-bg-purple"></div></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple-light"></div></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple"></div></el-col>
  </el-row>
  <el-row>
    <el-col :span="6"><div class="grid-content ep-bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light"></div></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple"></div></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light"></div></el-col>
  </el-row>
  <el-row>
    <el-col :span="4"><div class="grid-content ep-bg-purple"></div></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light"></div></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple"></div></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light"></div></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple"></div></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple-light"></div></el-col>
  </el-row>
</template>
<style lang="scss">
.grid-content {
  height: 100px; /* 或其他高度 */
}
.ep-bg-purple-dark {
  background-color: #6a0dad; /* 深紫色 */
}
.ep-bg-purple {
  background-color: #8a2be2; /* 紫色 */
}
.ep-bg-purple-light {
  background-color: #d8bfd8; /* 淺紫色 */
}
</style>

2.分欄間隔 gutter指定列之間的間距

<template>
  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
</template>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

3.混合布局

<template>
  <el-row :gutter="20">
    <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
</template>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

4.列偏移

<template>
  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6" :offset="6">
      <div class="grid-content ep-bg-purple" />
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="6" :offset="6">
      <div class="grid-content ep-bg-purple" />
    </el-col>
    <el-col :span="6" :offset="6">
      <div class="grid-content ep-bg-purple" />
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12" :offset="6">
      <div class="grid-content ep-bg-purple" />
    </el-col>
  </el-row>
</template>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

5.對(duì)齊方式

<template>
  <el-row class="row-bg">
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row class="row-bg" justify="center">
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row class="row-bg" justify="end">
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row class="row-bg" justify="space-between">
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row class="row-bg" justify="space-around">
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
  <el-row class="row-bg" justify="space-evenly">
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
</template>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

6.響應(yīng)式布局

<template>
  <el-row :gutter="10">
    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
      <div class="grid-content ep-bg-purple" />
    </el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
      <div class="grid-content ep-bg-purple-light" />
    </el-col>
    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
      <div class="grid-content ep-bg-purple" />
    </el-col>
    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
      <div class="grid-content ep-bg-purple-light" />
    </el-col>
  </el-row>
</template>
<style>
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

Link鏈接

鏈接標(biāo)簽和按鈕都有type屬性，disabled
1.基礎(chǔ)文字鏈接 el-link

<template>
  <div>
    <el-link  target="_blank">default</el-link>
    <el-link type="primary">primary</el-link>
    <el-link type="success">success</el-link>
    <el-link type="warning">warning</el-link>
    <el-link type="danger">danger</el-link>
    <el-link type="info">info</el-link>
  </div>
</template>
<style scoped>
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>

2禁用狀態(tài)：

<template>
  <div>
    <el-link disabled>default</el-link>
    <el-link type="primary" disabled>primary</el-link>
    <el-link type="success" disabled>success</el-link>
    <el-link type="warning" disabled>warning</el-link>
    <el-link type="danger" disabled>danger</el-link>
    <el-link type="info" disabled>info</el-link>
  </div>
</template>
<style scoped>
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>

3.下劃線：underline="false"

<template>
  <div>
    <el-link :underline="false">Without Underline</el-link>
    <el-link>With Underline</el-link>
  </div>
</template>
<style scoped>
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>

4.圖標(biāo)
鏈接標(biāo)簽中引用：icon="edit"

連接標(biāo)簽包裹圖標(biāo)標(biāo)簽

<template>
  <div>
    <el-link :icon="Edit">Edit</el-link>
    <el-link>
      Check<el-icon class="el-icon--right"><icon-view /></el-icon>
    </el-link>
  </div>
</template>
<script setup lang="ts">
import { Edit, View as IconView } from '@element-plus/icons-vue'
</script>
<style scoped>
.el-link {
  margin-right: 8px;
}
</style>

scrollbar滾動(dòng)條

1.el-scrollbar

<template>
  <el-scrollbar height="400px">
    <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
  </el-scrollbar>
</template>
<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

2.橫向滾動(dòng)

<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </el-scrollbar>
</template>
<style scoped>
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>

3.最大高度：

<template>
  <el-button @click="add">Add Item</el-button>
  <el-button @click="onDelete">Delete Item</el-button>
  <el-scrollbar max-height="400px">
    <p v-for="item in count" :key="item" class="scrollbar-demo-item">
      {{ item }}
    </p>
  </el-scrollbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(3)
const add = () => {
  count.value++
}
const onDelete = () => {
  if (count.value > 0) {
    count.value--
  }
}
</script>
<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

4.手動(dòng)滾動(dòng)

<template>
  <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
    <div ref="innerRef">
      <p v-for="item in 20" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </el-scrollbar>
  <el-slider
    v-model="value"
    :max="max"
    :format-tooltip="formatTooltip"
    @input="inputSlider"
  />
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElScrollbar } from 'element-plus'
const max = ref(0)
const value = ref(0)
const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
onMounted(() => {
  max.value = innerRef.value!.clientHeight - 380
})
const inputSlider = (value: number) => {
  scrollbarRef.value!.setScrollTop(value)
}
const scroll = ({ scrollTop }) => {
  value.value = scrollTop
}
const formatTooltip = (value: number) => {
  return `${value} px`
}
</script>
<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.el-slider {
  margin-top: 20px;
}
</style>

space間距

雖然我們擁有 Divider 組件，但很多時(shí)候我們需要不是一個(gè)被 Divider 組件分割開的頁(yè)面結(jié)構(gòu)，因此我們會(huì)重復(fù)的使用很多的 Divider 組件，這在我們的開發(fā)效率上造成了一定的困擾。 間距組件就是為了解決這種困擾應(yīng)運(yùn)而生的