Element-plus安装及其底子组件利用
简而言之，在main.js中导出以下库,仅此，搞多了出错难排查import ElementPlus from 'element-plus' //导入ElementPlus 模块
import 'element-plus/dist/index.css' //引入样式
app.use(ElementPlus) //注册库就能利用了
Element Plus 是一个基于 Vue 3 的组件库，提供了一系列 UI 组件（如按钮、表格、对话框等），可以资助快速构建用户界面。那么提供了该组件跟我寻常直接在<template></template>标签中直接写<button></button>标签来创建按钮有什么区别？
Element Plus 组件实际上是对原生 HTML 和 CSS 的封装，它提供了一系列预界说的样式和功能，使得开发者可以更轻松地构建一致且雅观的用户界面
[*] 封装：Element Plus 组件将原生 HTML 元素（如按钮、表格等）举行了封装，增加了丰富的样式和功能选项。
[*] 样式与一致性：组件自带的样式确保了在不同装备和欣赏器上的一致性，淘汰了样式调整的复杂性。
[*] 事件处理：尽管组件库提供了许多内置功能，事件处理仍然必要利用 JavaScript 举行界说和处理。这与原生 HTML 是一样的。
[*] 利用方便：通过利用组件，开发者可以更快地实现复杂的功能，而不必从头开始筹划和实现所有的样式和行为。
一.安装
利用包管理器：
# NPM
npm install element-plus --save
# Yarn
yarn add element-plus
# pnpm
pnpm install element-plus
如果网络环境不好，发起利用中国npm镜像:
设置清华大学镜像并安装element-plus：
npm config set registry https://mirrors.tuna.tsinghua.edu.cn/npm/
npm install element-plus
中国科学技术大学(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 的更换工具，主动利用淘宝镜像
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>
二.在项目中利用Element Plus
引入：
（volar适用于ts,而对于js，利用vetur)
完整引入（对打包后的文件大小不在乎，利用完整导入更方便）
// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus' //从element-plus库中导入ElementPlus对象，该对象主要是库的主要功能或组件集合，可在vue应用中使用
import 'element-plus/dist/index.css' //引入样式
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus) //注册库，所有Element Plus组件都可以在应用中使用，在所有组件中都能使用
app.mount('#app')
按需导入：
安装额外插件来导入要利用的组件
安装 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插件，千万不要把它忘记了，报一堆错，浏览器一片红
AutoImport({
resolvers: ,
}),
Components({
resolvers: ,
}),
],
}) 作用：
主动导入：利用 unplugin-auto-import，可以在代码中直接利用 Element Plus 的 API，而无需手动导入，这样可以简化代码并进步开发效率。
主动注册组件：通过 unplugin-vue-components 和 ElementPlusResolver，可以主动注册所有利用的 Element Plus 组件，克制在每个文件中重复注册，简化组件管理。
提升开发体验：淘汰样板代码，进步代码整齐性和可维护性，使开发者能更专注于业务逻辑。
Element Plus 的 API 包括组件、属性、事件和方法等。以下是一些常见的 Element Plus API：
常见组件
1.底子组件：
[*]Button：按钮组件，支持多种样式和尺寸。
[*]Input：输入框组件，支持文本输入和验证。
[*]Select：下拉选择框组件，支持多选和搜索。
[*]
2.布局组件：
[*]Container：用于布局的容器组件，可以设置顶部、底部、侧边栏等。
[*]Row/Col：栅格布局组件，用于快速创建响应式布局。
3.表单组件：
[*]Form：表单组件，支持表单验证。
[*]Checkbox、Radio、Switch：用于选择的各种组件。
4.反馈组件：
[*]Message：全局消息提示组件。
[*]Notification：通知提示组件。
5.数据展示组件：
[*]Table：表格组件，支持排序、筛选和分页。
[*]Pagination：分页组件，用于数据分页展示。
组件的属性和方法：
[*] 属性：每个组件都有一系列可配置的属性，例如：
[*]type、size：用于设置按钮的范例和尺寸。
[*]placeholder：用于设置输入框的占位符文本。
[*] 事件：组件通常会提供事件监听，例如：
[*]click：按钮的点击事件。
[*]change：输入框内容变化时触发的事件。
[*] 方法：某些组件提供的方法，可以在实例中调用，例如：
[*]show()：显示模态框。
[*]hide()：隐藏模态框。
全局配置
在引入ElementPlus时，可以传入一个包含size和zIndex属性的全局配置对象。size用于设置表单组建的默认尺寸，zIndex用于设置弹出组件的层级，zIndex的默认值为2000
完整引入（上边注册库仅仅是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>
三.组件
底子组件：
button按钮：
button属性：
1.type用来指定按钮内的配景颜色，但是按钮内的笔墨颜色是白色
<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>https://i-blog.csdnimg.cn/direct/a8090df93f86481dbdb63ff7965e9999.png
2.plain属性确定是否为朴素按钮，设置了朴素按钮之后，仅显示边框颜色和透明配景色
<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>https://i-blog.csdnimg.cn/direct/857b253ed20a4ed89b08a9eed2dcf971.png
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>https://i-blog.csdnimg.cn/direct/fe3a460dc8f64b5f9f1cb032b9177d31.png
4.circle 是否是圆形按钮 icon 图标，前面有冒号是动态绑定，没有是静态
<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>https://i-blog.csdnimg.cn/direct/8005c4b7448f4c5fad630439dd733b2b.png
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>
https://i-blog.csdnimg.cn/direct/0795253ec3da438095569466dee21841.png
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>
https://i-blog.csdnimg.cn/direct/3b11de06dc5643ea92f4d08c560dc9e6.png
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>
https://i-blog.csdnimg.cn/direct/d397458f3dbe4625bfc9a0538f79ae8d.png
8.图标按钮（要是图标里不必要加笔墨，那么直接是单标签）
<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>
https://i-blog.csdnimg.cn/direct/81e3574e3a9048f39ddf8033e9867ba2.png
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>
https://i-blog.csdnimg.cn/direct/09b508c0c0174446b902738ee3b921bf.png
10.加载状态按钮
<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>
https://i-blog.csdnimg.cn/direct/c96da3e5e6ad498cb5ca8f6f52c7ebdd.png
11.调整尺寸 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>
https://i-blog.csdnimg.cn/direct/5366d454cae5414f810b84488ead042e.png
12.自界说元素标签 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"
href="https://github.com/element-plus/element-plus"
target="_blank"
rel="noopener noreferrer"
>
a
</el-button>
</template>
https://i-blog.csdnimg.cn/direct/6b8f48d26a40402caf36f76eafb30fbc.png
13.自界说颜色（isDark: 这是一个响应式变量，通常用于指示当前主题是“深色模式（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>
https://i-blog.csdnimg.cn/direct/517f720cdd954968b72e02213353717b.png
https://i-blog.csdnimg.cn/direct/0765dd6ff5784f26acbf848e31f6cbcd.png
https://i-blog.csdnimg.cn/direct/98af9b63bc55445b851eea0ef3bcdc66.png
button插槽：
https://i-blog.csdnimg.cn/direct/e09efd36147b44d693ee4e5ecda92abc.png
button方法：
https://i-blog.csdnimg.cn/direct/e2710a2b92fb4d508e4b0027c76348eb.png
https://i-blog.csdnimg.cn/direct/f6e96643eaa64d038da5f901fa0e8cc8.png
[*]<el-button>：单个按钮，用于实行一个特定的操纵。
[*]<el-button-group>：包含多个按钮，通常用于一组相干的操纵，比如多种选择或工具栏。
[*]利用 button-group 时，按钮之间的间距和样式会主动调整，视觉上更整齐
示例：
<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>
三个按钮被包裹在 button-group 中，形成了一个同一的操纵地域。
Border边框：
边框样式：（实线和虚线）
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中定义的一个css变量，是个默认颜色值*/
}
.demo-border .line .dashed {
border-top: 2px dashed var(--el-border-color);
}
</style>
https://i-blog.csdnimg.cn/direct/8b1712097c9d4360a9b53a05232629a1.png
圆角样式：(el-border-radius)
<script setup>
</script>
<template>
<!-- el-row创建行，gutter属性设置外边距，即列与列之间的间距 。: 前缀表示这是一个动态绑定，意味着 gutter 的值来自 Vue 的数据或计算属性-->
<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>
https://i-blog.csdnimg.cn/direct/a943fb34bf914f74be0b8b035df79f0d.png
阴影：（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>
https://i-blog.csdnimg.cn/direct/b83568481b3b4381967868175bfddda9.png
color色彩：Element Plus为了克制视觉转达差异，利用一套特定的调色板来规定颜色，为搭建的产品提供一致的表面视觉感受
主色
https://i-blog.csdnimg.cn/direct/0f4d2c968bed415187b0cc293d696ff1.png
https://i-blog.csdnimg.cn/direct/94c74be60e79415fa25a50bc25e3f938.png
中性色
中性色用于文本、配景和边框颜色。 通过运用不同的中性色，来表现层次结构
https://i-blog.csdnimg.cn/direct/0059ee658c5c4fd3a5a51953e8e48232.png
https://i-blog.csdnimg.cn/direct/45ddf122dd2e4570a665970dab0a3da5.png
https://i-blog.csdnimg.cn/direct/8bd3af2455aa40a3a59b0cf77ff7d6be.png
Container布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下分列， 否则会水平左右分列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要地域容器。
<el-footer>：底栏容器。
常见的页面布局
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>
https://i-blog.csdnimg.cn/direct/08d90566fe5e4ad89a34fb47045f0b12.png
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>
https://i-blog.csdnimg.cn/direct/544c8b0a2be3420599113ffde61bd596.png
3.container包裹aside和main，不过要指定侧边栏width属性，明确指定侧边栏的宽度，从而确保整体布局的一致性和可预测性
用style设置容器配景色
height在<el-container>标签无效
<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>
https://i-blog.csdnimg.cn/direct/377060642fcf43a492072e9b712d0f6e.png
4.三个部分，大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>
https://i-blog.csdnimg.cn/direct/9f47c4af41584c1892246dbd77d904f4.png
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>
https://i-blog.csdnimg.cn/direct/bc436945aa6b43769f3fd6a1ba4904bb.png
https://i-blog.csdnimg.cn/direct/324dba6d02d742bfb93426b057d5cbb6.png
https://i-blog.csdnimg.cn/direct/d84a71c1f0b54f008b1b364d073abdb3.png
https://i-blog.csdnimg.cn/direct/b8ecc21b8a0246099355a7bd3307f323.png|
https://i-blog.csdnimg.cn/direct/18960dc3bccd49c2b3a27670b3ac0f29.png
https://i-blog.csdnimg.cn/direct/0cef1dbeacc74f3f8c6edf17a746ff12.png
https://i-blog.csdnimg.cn/direct/4e3caf7f43004958a3b07e203f498e26.png
https://i-blog.csdnimg.cn/direct/54b91c17287e4a9ba527347abf33a889.png
lcon图标
Element Plus提供了一套常用的图标集合（如果想要直接利用，必要全局注册组件）
安装
利用包管理器
# NPM
npm install @element-plus/icons-vue
# Yarn
yarn add @element-plus/icons-vue
# pnpm
pnpm install @element-plus/icons-vue
法1：注册所有图标
必要从@element-plus/icons-vue 中导入所有图标并举行全局注册
[*] Object.entries(ElementPlusIconsVue): 获取 ElementPlusIconsVue 对象中所有的键值对（图标组件）。
[*] for (const of ...): 遍历每个图标的键（名称）和对应的组件。
[*] app.component(key, component): 将每个图标组件以其名称注册到 Vue 应用中，使得在模板中可以直接利用这些图标。
这样，开发者就可以方便地在应用中利用 ElementPlus 提供的图标组件
// main.js
// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}法2：直接通过欣赏器的HTML标签导入Element Plus，然后就能利用全局变量ElementPlusIconsVue
根据不同的 CDN 提供商有不同的引入方式， 根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 和 jsDelivr 举例
利用unpkg:
<script src="//unpkg.com/@element-plus/icons-vue"></script>
利用jsDelivr:
<script src="//cdn.jsdelivr.net/npm/@element-plus/icons-vue"></script>
底子用法
<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template>
<div>
<el-icon :size="size" :color="color">
<Edit />
</el-icon>
<!-- 或者独立使用它，不从父级获取属性 -->
<Edit />
</div>
</template>
<!--<Edit /> 是一个 SVG 图标组件，通常来自 Element Plus 图标库。它用于在界面中显示一个编辑图标。代码中的 <el-icon> 组件用来包裹这个图标，并通过 :size 和 :color 属性动态设置图标的大小和颜色。如果不使用 <el-icon> 包裹，<Edit /> 图标仍然可以独立显示，但会使用默认样式。-->联合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>https://i-blog.csdnimg.cn/direct/255a513915f047bd93fcd4f321fd028b.png
直接利用svg图标
<template>
<div style="font-size: 20px">
<!-- 由于SVG图标默认不携带任何属性 -->
<!-- 你需要直接提供它们 -->
<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>
https://i-blog.csdnimg.cn/direct/ac679d0f5dfe488abe4380a8a14ebede.png
Layout布局
通过底子的24分栏，迅速简便创建布局
组件默认利用 Flex 布局，不必要手动设置 type="flex"。
请注意父容器克制利用 inline 相干样式，会导致组件宽度不能撑满。
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>
https://i-blog.csdnimg.cn/direct/cb0d79821aec4ffdadfacb5bb1645b5f.png
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>
https://i-blog.csdnimg.cn/direct/1d253c4d73fc4603aad803e7c66a3424.png
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>
https://i-blog.csdnimg.cn/direct/fde0ac862423433497cf2db8b04e539b.png
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>
https://i-blog.csdnimg.cn/direct/a7b21b4500634d2baf22f98a30cd0da3.png
5.对齐方式
<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>
https://i-blog.csdnimg.cn/direct/ad86662ae2244eda9dc41871fa921f56.png
6.响应式布局
<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>
https://i-blog.csdnimg.cn/direct/47be4de916dd44bfa37d892628476855.png
https://i-blog.csdnimg.cn/direct/15fdb074132e46c78fed37d4222db658.png
https://i-blog.csdnimg.cn/direct/8995f642814c44d08974ccb86295050f.png
https://i-blog.csdnimg.cn/direct/f6cb625fd8744e0e91283027aafaee87.png
https://i-blog.csdnimg.cn/direct/55d2d2f54dd44ed2afd70dfd4434f2f8.png
Link链接
链接标签和按钮都有type属性，disabled
1.底子笔墨链接 el-link
<template>
<div>
<el-link href="https://element-plus.org" 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禁用状态：
<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>
https://i-blog.csdnimg.cn/direct/c7faea15d8d540dda54208d0035a69e3.png
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>
https://i-blog.csdnimg.cn/direct/0aeef7fc3a61418eb54f9ecfc1f8599c.png
4.图标
链接标签中引用 ：icon="edit"
毗连标签包裹图标标签
<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>
https://i-blog.csdnimg.cn/direct/6f37bbdbfe1d481fb4da7916d33acf76.png
https://i-blog.csdnimg.cn/direct/ff1a72129950498d835257c1a005070e.png
scrollbar滚动条
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>
https://i-blog.csdnimg.cn/direct/107d76e3637b4e9b90471c6ab62c6f4d.png
2.横向滚动
<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>
https://i-blog.csdnimg.cn/direct/8d19b0bea0cd44f4b105cc747858906e.png
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>
https://i-blog.csdnimg.cn/direct/14a1a36f201348858dd3b70fc89b254c.png
4.手动滚动
<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>
https://i-blog.csdnimg.cn/direct/73a760889ddd49bba7b9f4cf31ced392.png
https://i-blog.csdnimg.cn/direct/b953749e392849a2ad27e78356f02fc0.png
https://i-blog.csdnimg.cn/direct/6e444ea9d9504cadbe57746c1ed6c839.png
https://i-blog.csdnimg.cn/direct/aa950203e38a45c686f59748c07a9b82.png
space间距
虽然我们拥有 Divider 组件，但许多时候我们必要不是一个被 Divider 组件 分割开的页面结构，因此我们会重复的利用许多的 Divider 组件，这在我们的开发效率上造成了肯定的困扰。 间距组件就是为了办理这种困扰应运而生的
https://i-blog.csdnimg.cn/direct/53061475d5ae43f68750c010f084d230.png
https://i-blog.csdnimg.cn/direct/ba067ca229a5496195308aa7df4834b1.png
https://i-blog.csdnimg.cn/direct/69022b0dac2c4d14a801c7c11322d52b.png
https://i-blog.csdnimg.cn/direct/383029ec3665424aa99a7501a54a0420.png
https://i-blog.csdnimg.cn/direct/1e19190b8a5f44ab913c0641f2f5ae04.png
https://i-blog.csdnimg.cn/direct/9bb2360bd53f471e81ae39e7ecc4bd85.png
https://i-blog.csdnimg.cn/direct/2d0fd6efbdb04ea890fefeb7ad957662.png
https://i-blog.csdnimg.cn/direct/b4e88d5b877f4937acd903054052cf12.png
https://i-blog.csdnimg.cn/direct/d02edd8bed5b48888900f16a0504ae12.png
https://i-blog.csdnimg.cn/direct/5e393ce96730490faa5382adeac368db.png
https://i-blog.csdnimg.cn/direct/3124b9fa654d4e6d87207b7598ac3c3f.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]