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)目效率,感興趣的朋友一起看看吧
簡(jiǎn)而言之，在main.js中導(dǎo)出以下庫(kù),僅此，搞多了出錯(cuò)難排查
import ElementPlus from 'element-plus' //導(dǎo)入
ElementPlus模塊import 'element-plus/dist/index.css' //引入樣式
app.use(ElementPlus) //注冊(cè)庫(kù)就能使用了
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>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
</head>
jsDelivr:
<head>
<!-- Import style -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>
<!-- Import Vue 3 -->
<script src="//cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Import component library -->
<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插件，千萬(wàn)不要把它忘記了，報(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:
<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
基礎(chǔ)用法
<!-- 使用 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)而生的
到此這篇關(guān)于Element-plus安裝及其基礎(chǔ)組件使用的文章就介紹到這了,更多相關(guān)Element-plus安裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript簡(jiǎn)單計(jì)算器 可美化，需要的朋友可以測(cè)試下。參考下實(shí)現(xiàn)原理。2011-10-10
js統(tǒng)計(jì)錄入文本框中字符的個(gè)數(shù)并加以限制不超過多少
為了更直觀的體現(xiàn)用戶在文本框輸入文本時(shí)能看到自己輸入了多少字，并且有些特殊的要求字?jǐn)?shù)不超過多少，本文給出了具體的實(shí)現(xiàn)2014-05-05
使用JavaScript實(shí)現(xiàn)一個(gè)錄屏插件
不知道大家平時(shí)都是使用什么錄屏軟件呢,有沒有想過只用JavaScript我們也可以快速實(shí)現(xiàn)一個(gè)錄屏插件呢,感興趣的小伙伴就跟隨小編一起學(xué)習(xí)一下吧2024-10-10
極致之美——百行代碼實(shí)現(xiàn)全新智能語(yǔ)言
極致之美——百行代碼實(shí)現(xiàn)全新智能語(yǔ)言...2007-03-03
本文主要分享了js返回頂部的實(shí)例代碼?？蓮?fù)制直接運(yùn)行，方便快捷。有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了第三篇Javascript動(dòng)畫效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
現(xiàn)代 javscript 編程 資料...2007-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簽到日歷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
js實(shí)現(xiàn)仿Windows風(fēng)格選項(xiàng)卡和按鈕效果實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)仿Windows風(fēng)格選項(xiàng)卡和按鈕效果的方法,可實(shí)現(xiàn)類似windows選項(xiàng)卡風(fēng)格的tab標(biāo)簽效果,需要的朋友可以參考下2015-05-05
詳細(xì)分析Javascript中創(chuàng)建對(duì)象的四種方式
這篇文章詳細(xì)介紹了Javascript中創(chuàng)建對(duì)象的幾種方式與每種方式的優(yōu)缺點(diǎn)，其中包括工廠模式、構(gòu)造函數(shù)模式、原型模式和組合使用構(gòu)造函數(shù)模式和原型模式，有需要的小伙伴們一起來學(xué)習(xí)學(xué)習(xí)吧。2016-08-08