关于
网站快速成型工具 Element :基于 Vue 2.x 的 Element UI
Element Plus :基于 Vue 3,面向设计师和开发者的组件库
由于 Vue 3 不再支持 IE11,Element Plus 也不再支持 IE 浏览器。
一、安装
安装 element-plus 插件。
可以使用以下命令进行安装:
# NPM
$ vue add element-plus
vue add element-plus
📦 Installing vue-cli-plugin-element-plus...
added 1 package, and audited 1052 packages in 16s
158 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Successfully installed plugin: vue-cli-plugin-element-plus
? How do you want to import Element Plus? Fully import
? Do you want to overwrite the SCSS variables of Element Plus? No
? Choose the locale you want to load, the default locale is English (en) zh-cn
🚀 Invoking generator for vue-cli-plugin-element-plus...
📦 Installing additional dependencies...
added 8 packages, and audited 1060 packages in 56s
159 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Icon 图标
Element Plus 提供了一套常用的图标集合。
# NPM
$ npm install @element-plus/icons-vue
npm install @element-plus/icons-vue --legacy-peer-deps
added 1 package, and audited 1061 packages in 6s
159 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
vueuse/core
这个里面封装了很多hook工具函数
npm i @vueuse/core
added 6 packages, changed 4 packages, and audited 1072 packages in 12s
174 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
安装后 package.json 如下
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"@vueuse/core": "^10.2.1",
"core-js": "^3.31.1",
"element-plus": "^2.3.8",
"vue": "^3.3.4",
"vue-i18n": "^9.3.0-beta.24",
"vue-router": "^4.2.4",
"vuex": "^4.1.0"
},
"devDependencies": {
"@babel/core": "^7.22.9",
"@babel/eslint-parser": "^7.22.9",
"@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-plugin-router": "~5.0.8",
"@vue/cli-plugin-vuex": "~5.0.8",
"@vue/cli-service": "~5.0.8",
"@vue/eslint-config-standard": "^8.0.1",
"eslint": "^8.45.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-vue": "^9.15.1",
"sass": "^1.64.1",
"sass-loader": "^13.3.2",
"vue-cli-plugin-element-plus": "~0.0.13"
}
二、使用
在 main.js 中将 element-plus 注入 vue 中
import installElementPlus from './plugins/element'
installElementPlus(app)
/plugins/element.js
import ElementPlus from 'element-plus'
// Light 模式
import 'element-plus/dist/index.css'
// Dark 模式
import 'element-plus/theme-chalk/dark/css-vars.css'
//国际化
// import locale from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/dist/locale/zh-cn.js'
//注册所有图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//注册所有图标
export default (app) => {
app.use(ElementPlus, { locale })//全局配置国际化
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
}
暗黑模式
<el-button @click="switchThemes()">{{ showMode }}</el-button>
<script>
import { useDark, useToggle } from '@vueuse/core'
const isDark = useDark()
export default {
name: 'TestView',
data() {
return {
showMode: 'Dark Mode'
};
},
methods: {
switchThemes() {
const toggleDark = useToggle(isDark)//模式切换
// console.log(toggleDark())
this.showCurrentMode(toggleDark())
}, showCurrentMode(dark) {
this.showMode = dark === true ? 'Light Mode' : 'Dark Mode'
}
}
}
</script>
基础组件
Button 按钮
常用的操作按钮。
el-button 按钮
使用 type、plain、round 和 circle 等来定义按钮的样式。
- type: 类型,改变颜色,可选值 ‘primary’| ‘success’| ‘warning’| ‘danger’| ‘info’| ‘text’(delete)
- plain、round、circle: 朴素、圆角、圆形,改变形状,boolean 默认false
- icon: 图标组件,string/Component
- disabled: 定义按钮是否被禁用,boolean 默认false
- link: 链接按钮,boolean 默认false
- text: 文字按钮,没有边框和背景色的按钮,boolean 默认false
- bg: 显示文字按钮背景颜色,boolean 默认false
- size: 尺寸,可选值 ‘large’| ‘default’| ‘small’
- loading: 加载中状态(自动旋转),boolean 默认false
- loading-icon: 自定义加载中状态图标组件,string/Component 默认Loading
- autofocus: 原生 autofocus 属性,boolean 默认false
- native-type: 原生 type 属性,‘button’| ‘submit’| ‘reset’
- color: 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色,string
- dark: dark 模式, 意味着自动设置 color 为 dark 模式的颜色,boolean 默认false
- tag: 自定义元素标签,string/Component 默认button
Exposes
- ref 按钮 html 元素,object Ref
- size 按钮尺寸,object ComputedRef<‘’ | ‘small’ | ‘default’ | ‘large’>
- type 按钮类型,object ComputedRef<‘’ | ‘default’ | ‘primary’ | ‘success’ | ‘warning’ | ‘info’ | ‘danger’ | ‘text’>
- disabled 按钮已禁用,object ComputedRef
- shouldAddSpace 是否在两个字符之间插入空格,object ComputedRef
el-button-group 按钮组
size 用于控制该按钮组内按钮的大小,可选值 ‘large’| ‘default’| ‘small’
type 用于控制该按钮组内按钮的类型,可选值 ‘primary’| ‘success’| ‘warning’| ‘danger’| ‘info’
<el-row 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>
</el-row>
<el-row 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>
</el-row>
<el-row 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>
</el-row>
<el-row class="mb-4">
<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 />
</el-row>
<el-row 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>
</el-row>
<el-row class="mb-4">
<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>
</el-row>
<el-row class="mb-4">
<el-button link>Plain</el-button>
<el-button type="primary" link>Primary</el-button>
<el-button type="success" link>Success</el-button>
<el-button type="info" link>Info</el-button>
<el-button type="warning" link>Warning</el-button>
<el-button type="danger" link>Danger</el-button>
</el-row>
<el-row class="mb-4">
<el-button link disabled>Plain</el-button>
<el-button type="primary" link disabled>Primary</el-button>
<el-button type="success" link disabled>Success</el-button>
<el-button type="info" link disabled>Info</el-button>
<el-button type="warning" link disabled>Warning</el-button>
<el-button type="danger" link disabled>Danger</el-button>
</el-row>
<el-row class="mb-4">
<el-button text>Plain</el-button>
<el-button type="primary" text>Primary</el-button>
<el-button type="success" text>Success</el-button>
<el-button type="info" text>Info</el-button>
<el-button type="warning" text>Warning</el-button>
<el-button type="danger" text>Danger</el-button>
</el-row>
<el-row class="mb-4">
<el-button text bg>Plain</el-button>
<el-button type="primary" text bg>Primary</el-button>
<el-button type="success" text bg>Success</el-button>
<el-button type="info" text bg>Info</el-button>
<el-button type="warning" text bg>Warning</el-button>
<el-button type="danger" text bg>Danger</el-button>
</el-row>
<el-row class="mb-4">
<el-button text disabled>Plain</el-button>
<el-button type="primary" text disabled>Primary</el-button>
<el-button type="success" text disabled>Success</el-button>
<el-button type="info" text disabled>Info</el-button>
<el-button type="warning" text disabled>Warning</el-button>
<el-button type="danger" text disabled>Danger</el-button>
</el-row>
<el-row class="mb-4">
<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>
</el-row>
<el-row class="mb-4">
<el-button-group class="mb-4">
<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-row>
<el-row class="mb-4">
<el-button-group class="mb-4">
<el-button type="primary" icon="Edit" />
<el-button type="primary" icon="Share" />
<el-button type="primary" icon="Delete" />
</el-button-group>
</el-row>
<el-row class="mb-4">
<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>
</el-row>
<el-row class="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>
</el-row>
<el-row class="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>
</el-row>
<el-row class="mb-4">
<el-button icon="Search" size="large" circle />
<el-button icon="Search" circle />
<el-button icon="Search" size="small" circle />
</el-row>
<el-row class="mb-4">
<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>
</el-row>
<el-row class="mb-4">
<el-button color="#626aef">Default</el-button>
<el-button color="#626aef" plain>Plain</el-button>
<el-button color="#626aef" disabled>Disabled</el-button>
<el-button color="#626aef" disabled plain>Disabled Plain</el-button>
</el-row>
显示效果
Border 边框
可用于按钮、卡片、弹窗等组件里。
边框样式
//Solid 1px
border-top: 1px solid var(--el-border-color);
//Dashed 2px
border-top: 2px dashed var(--el-border-color);
圆角样式
//No Radius border-radius: 0px
borderRadius: var(--el-border-radius)
//Small Radius border-radius: 2px
borderRadius: var(--el-border-radius-small)
//Large Radius border-radius: 4px
borderRadius: var(--el-border-radius-base)
//Round Radius border-radius: 20px
borderRadius: var(--el-border-radius-round)
阴影样式
//Basic Shadow
boxShadow: var(--el-box-shadow)
//Light Shadow
boxShadow: var(--el-box-shadow-light)
//Lighter Shadow
boxShadow: var(--el-box-shadow-lighter)
//Dark Shadow
boxShadow: var(--el-box-shadow-dark)
<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 />
</td>
</tr>
<tr>
<td class="text">Dashed</td>
<td class="text">2px</td>
<td class="line">
<div class="dashed" />
</td>
</tr>
</tbody>
</table>
<el-row gutter="12" class="demo-radius">
<el-col span="6" xs="{ span: 12 }">
<div class="title">No Radius</div>
<div class="value">
<code>border-radius: '0px'</code>
</div>
<div class="radius" style="borderRadius: var(--el-border-radius)" />
</el-col>
<el-col span="6" xs="{ span: 12 }">
<div class="title">Small Radius</div>
<div class="value">
<code>border-radius: '2px'</code>
</div>
<div class="radius" style="borderRadius: var(--el-border-radius-small)" />
</el-col>
<el-col span="6" xs="{ span: 12 }">
<div class="title">Large Radius</div>
<div class="value">
<code>border-radius: '4px'</code>
</div>
<div class="radius" style="borderRadius: var(--el-border-radius-base)" />
</el-col>
<el-col span="6" xs="{ span: 12 }">
<div class="title">Round Radius</div>
<div class="value">
<code>border-radius: '20px'</code>
</div>
<div class="radius" style="borderRadius: var(--el-border-radius-round)" />
</el-col>
</el-row>
<el-row gutter="12" class="demo-radius white">
<el-col span="6" xs="{ span: 12 }">
<div class="radius" style="boxShadow: var(--el-box-shadow)" />
<div class="title">
Basic Shadow
</div>
<div class="value">
<code text="xs">
--el-box-shadow
</code>
</div>
</el-col>
<el-col span="6" xs="{ span: 12 }">
<div class="radius" style="boxShadow: var(--el-box-shadow-light)" />
<div class="title">
Light Shadow
</div>
<div class="value">
<code text="xs">
--el-box-shadow-light
</code>
</div>
</el-col>
<el-col span="6" xs="{ span: 12 }">
<div class="radius" style="boxShadow: var(--el-box-shadow-lighter)" />
<div class="title">
Lighter Shadow
</div>
<div class="value">
<code text="xs">
--el-box-shadow-lighter
</code>
</div>
</el-col>
<el-col span="6" xs="{ span: 12 }">
<div class="radius" style="boxShadow: var(--el-box-shadow-dark)" />
<div class="title">
Dark Shadow
</div>
<div class="value">
<code text="xs">
--el-box-shadow-dark
</code>
</div>
</el-col>
</el-row>
.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);
}
.demo-border .line .dashed {
border-top: 2px dashed var(--el-border-color);
}
.white {
background-color: white;
}
.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;
margin-bottom: 20px;
}
显示效果
Color 色彩
主色
Element Plus 默认的主题色是明亮、友好的蓝色。
Brand Color #409EFF |
辅助色
在不同的场景中使用不同的场景颜色
Success #67C23A | Warning #E6A23C | Danger #F56C6C | Info #909399 |
中性色
中性色用于文本、背景和边框颜色。 通过运用不同的中性色,来表现层次结构。
Primary Text #E5EAF3 | Darker Border #636466 | Darker Fill #424243 | Basic Black #000000 |
Regular Text #CFD3DC | Dark Border #58585B | Dark Fill #39393A | Basic White #FFFFFF |
Secondary Text #A3A6AD | Base Border #4C4D4F | Base Fill #303030 | Transparent Transparent |
Placeholder Text #8D9095 | Light Border #414243 | Light Fill #262727 | Page Background #0A0A0A |
Disabled Text #6C6E72 | Lighter Border #363637 | Lighter Fill #1D1D1D | Base Background #141414 |
Extra-light Border #2B2B2C | Extra-light Fill #191919 | Overlay Background #1D1E1F | |
Blank Fill TRANSPARENT |
Container 布局容器
用于布局的容器组件,方便快速搭建页面的基本结构:
<el-container>:外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列, 否则会水平左右排列。
<el-header>:顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。
以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。 此外, 的直接子元素必须是后四个组件中的一个或多个。 后四个组件的亲元素必须是一个
Container
- direction 子元素的排列方向,‘horizontal’ | ‘vertical’ 默认子元素中有 el-header 或 el-footer 时为 vertical,否则为 horizontal
Header
- height 顶栏高度,string 默认60px
Aside
- width 侧边栏宽度,string 默认300px
Footer
- height 底栏高度,string 默认60px
//header main
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
//header main footer
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
//aside main
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
//header aside main
<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>
//header aside main footer
<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>
//aside header main
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>
//aside header main footer
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
例子
<template>
<el-container class="layout-container-demo" style="height: 500px">
<el-aside width="200px">
<el-scrollbar>
<el-menu :default-openeds="['1', '3']">
<el-sub-menu index="1">
<template #title>
<el-icon>
<message />
</el-icon>Navigator One
</template>
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>Option4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon><icon-menu /></el-icon>Navigator Two
</template>
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="2-4">
<template #title>Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<el-icon>
<setting />
</el-icon>Navigator Three
</template>
<el-menu-item-group>
<template #title>Group 1</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group 2">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="3-4">
<template #title>Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<div class="toolbar">
<el-dropdown>
<el-icon style="margin-right: 8px; margin-top: 1px">
<setting />
</el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span>Tom</span>
</div>
</el-header>
<el-main>
<el-scrollbar>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140" />
<el-table-column prop="name" label="Name" width="120" />
<el-table-column prop="address" label="Address" />
</el-table>
</el-scrollbar>
</el-main>
</el-container>
</el-container>
</template>
<script>
import { ref } from 'vue'
const item = {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
}
export default {
data() {
return {
tableData: [],
}
}, methods: {
fillData() {
this.tableData = ref(Array.from({ length: 20 }).fill(item))
}
}, created() {
this.fillData();
}
}
</script>
<style scoped>
.layout-container-demo .el-header {
position: relative;
background-color: var(--el-color-primary-light-7);
color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
color: var(--el-text-color-primary);
background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
border-right: none;
}
.layout-container-demo .el-main {
padding: 0;
}
.layout-container-demo .toolbar {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
right: 20px;
}
</style>
显示效果
Icon 图标
结合 el-icon 使用或直接使用
- color svg 的 fill 颜色,string 默认继承颜色
- size svg 图标的大小,size x size,number/string 默认继承字体大小
<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<el-icon :size="20" style="margin: 8px">
<Edit />
</el-icon>
<el-icon color="#409EFC" class="no-inherit" style="margin: 8px">
<Share />
</el-icon>
<el-icon style="margin: 8px">
<Delete />
</el-icon>
<el-icon class="is-loading" style="margin: 8px">
<Loading />
</el-icon>
<el-button type="primary" style="margin: 8px">
<el-icon style="vertical-align: middle">
<Search />
</el-icon>
<span style="vertical-align: middle"> Search </span>
</el-button>
<!-- 或者独立使用它,不从父级获取属性 -->
<div style="font-size: 20px; margin-top: 8px">
<!-- 由于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>
显示效果
图标集合
Layout 布局
通过基础的 24 分栏,迅速简便地创建布局。
组件默认使用 Flex 布局,不需要手动设置 type=“flex”。
请注意父容器避免使用 inline 相关样式,会导致组件宽度不能撑满。
Row
- gutter 栅格间隔,number 默认0
- justify 水平排列方式,可选值 ‘start’ | ‘end’ | ‘center’ | ‘space-around’ | ‘space-between’ | ‘space-evenly’ 默认start
- align 垂直排列方式,可选值 ‘top’ | ‘middle’ | ‘bottom’ 默认top
- tag 自定义元素标签,string 默认div
Col
- span 栅格占据的列数,number 默认24
- offset 栅格左侧的间隔格数,number 默认0
- push 栅格向右移动格数,number 默认0
- pull 栅格向左移动格数 ,number 默认0
- xs <768px 响应式栅格数或者栅格属性对象,number/ object
- sm ≥768px 响应式栅格数或者栅格属性对象,number/ object
- md ≥992px 响应式栅格数或者栅格属性对象 ,number/ object
- lg ≥1200px 响应式栅格数或者栅格属性对象,number/ object
- xl ≥1920px 响应式栅格数或者栅格属性对象,number/ object
- tag 自定义元素标签,string 默认div
object: {span?: number, offset?: number, pull?: number, push?: number}
Element Plus 额外提供了一系列类名,用于在某些条件下隐藏元素。 这些类名可以添加在任何 DOM 元素或自定义组件上。 如果需要,请自行引入以下文件:
import 'element-plus/theme-chalk/display.css'
这些类名为:
- hidden-xs-only - 当视口在 xs 尺寸时隐藏
- hidden-sm-only - 当视口在 sm 尺寸时隐藏
- hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
- hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
- hidden-md-only - 当视口在 md 尺寸时隐藏
- hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
- hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
- hidden-lg-only - 当视口在 lg 尺寸时隐藏
- hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
- hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
- hidden-xl-only - 当视口在 xl 尺寸时隐藏
//基础布局
<el-row :gutter="20">
<el-col :span="24">
<div class="grid-content ep-bg-purple-dark" />
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content ep-bg-purple" />
</el-col>
<el-col :span="12">
<div class="grid-content ep-bg-purple-light" />
</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-light" />
</el-col>
<el-col :span="8">
<div class="grid-content ep-bg-purple" />
</el-col>
</el-row>
<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-light" />
</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-light" />
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4">
<div class="grid-content ep-bg-purple" />
</el-col>
<el-col :span="4">
<div class="grid-content ep-bg-purple-light" />
</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-light" />
</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-light" />
</el-col>
</el-row>
<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>
//列偏移 通过指定 col 组件的 offset 属性可以指定分栏偏移的栏数。
<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>
.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;
}
.ep-bg-purple {
background-color: purple;
}
.ep-bg-purple-light {
background-color: lightpink;
}
.ep-bg-purple-dark {
background-color: darkblue;
}
显示效果
//对齐方式 通过justify 属性来定义子元素的排版方式,其取值为start、center、end、space-between、space-around或space-evenly。
<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>
//响应式布局 五个响应尺寸:xs、sm、md、lg 和 xl。
<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>
显示效果
Link 链接
文字超链接
- type 类型,可选值 ‘primary’ | ‘success’ | ‘warning’ | ‘danger’ | ‘info’ | ‘default’ 默认default
- underline 是否下划线,boolean 默认true
- disabled 是否禁用状态,boolean 默认false
- href 原生 href 属性,string
- icon 图标组件,string/Component
//文字链接类型
<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>
//文字链接不可用状态。
<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>
//文字链接下划线。
<div>
<el-link :underline="false">Without Underline</el-link>
<el-link>With Underline</el-link>
</div>
//带图标的链接 传递组件名称的字符串(提前注册)或组件本身是一个 SVG Vue 组件
<div>
<el-link icon="Edit">Edit</el-link>
<el-link>
Check<el-icon class="el-icon--right"><icon-view /></el-icon>
</el-link>
</div>
.el-link {
margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
vertical-align: text-bottom;
}
显示效果
Text
文本的常见操作
- type 类型,可选值 ‘primary’ | ‘success’ | ‘warning’ | ‘danger’ | ‘info’
- size 大小 ,可选值 ‘large’ | ‘default’ | ‘small’ 默认default
- truncated 显示省略号,boolean 默认false
- tag 自定义元素标签,string 默认span
//由 type 属性来选择 Text 的类型。
<div>
<el-text class="mx-1">Default</el-text>
<el-text class="mx-1" type="primary">Primary</el-text>
<el-text class="mx-1" type="success">Success</el-text>
<el-text class="mx-1" type="info">Info</el-text>
<el-text class="mx-1" type="warning">Warning</el-text>
<el-text class="mx-1" type="danger">Danger</el-text>
</div>
//使用 size 属性配置尺寸,可选的尺寸大小有: large, default 或 small
<div>
<el-text class="mx-1" size="large">Large</el-text>
<el-text class="mx-1">Default</el-text>
<el-text class="mx-1" size="small">Small</el-text>
</div>
//通过 truncated 属性,在文本超过视图或最大宽度设置时展示省略符。
<div>
<el-text class="w-100px" truncated>Self element set width 100px</el-text>
<el-row>
<el-col :span="4" :offset="10">
<el-text truncated>Squeezed by parent element</el-text>
</el-col>
</el-row>
</div>
//使用属性 tag 覆盖元素
<div>
<el-space direction="vertical">
<el-text>span</el-text>
<el-text tag="p">This is a paragraph.</el-text>
<el-text tag="b">Bold</el-text>
<el-text tag="i">Italic</el-text>
<el-text>
This is
<el-text tag="sub" size="small">subscript</el-text>
</el-text>
<el-text>
This is
<el-text tag="sup" size="small">superscript</el-text>
</el-text>
<el-text tag="ins">Inserted</el-text>
<el-text tag="del">Deleted</el-text>
<el-text tag="mark">Marked</el-text>
</el-space>
</div>
//混合使用 Text 组件
<div>
<el-space direction="vertical">
<el-text>
<el-icon>
<ElementPlus />
</el-icon>
Element-Plus
</el-text>
<el-row>
<el-text>Rate</el-text>
<el-rate class="ml-1" />
</el-row>
<el-text>
This is text mixed icon
<el-icon>
<Bell />
</el-icon>
and component
<el-button>Button</el-button>
</el-text>
</el-space>
</div>
.mx-1 {
margin-left: 1em;
margin-right: 1em;
}
.ml-1 {
margin-left: 1em;
}
div {
margin-top: 10px;
}
.w-100px {
width: 100px;
}
显示效果
Scrollbar 滚动条
用于替换浏览器原生滚动条。
- height 滚动条高度,string/number
- max-height 滚动条最大高度,string/number
- native 是否使用原生滚动条样式,boolean 默认false
- wrap-style 包裹容器的自定义样式,string/object
- wrap-class 包裹容器的自定义类名,string
- view-style 视图的自定义样式,string/ object
- view-class 视图的自定义类名,string
- noresize 不响应容器尺寸变化,如果容器尺寸不会发生变化,最好设置它可以优化性能,boolean 默认false
- tag 视图的元素标签,string 默认div
- always 滚动条总是显示,boolean 默认false
- min-size 滚动条最小尺寸,number 默认20
object CSSSProperties | CSSSProperties[] | string[]
Events
- scroll 当触发滚动事件时,返回滚动的距离 Function ({ scrollLeft: number, scrollTop: number }) => void
Exposes
- handleScroll 触发滚动事件,Function () => void
- scrollTo 滚动到一组特定坐标,Function (options: ScrollToOptions | number, yCoord?: number) => void
- setScrollTop 设置滚动条到顶部的距离,Function (scrollTop: number) => void
- setScrollLeft 设置滚动条到左边的距离,Function (scrollLeft: number) => void
- update 手动更新滚动条状态,Function () => void
- wrapRef 滚动条包裹的 ref 对象,object Ref
<template>
<!-- 通过 height 属性设置滚动条高度,若不设置则根据父容器高度自适应。 -->
<el-scrollbar height="100px">
<p v-for="item in 20" :key="item" class="scrollbar-height-item">{{ item }}</p>
</el-scrollbar>
<!-- 当元素宽度大于滚动条宽度时,会显示横向滚动条。 -->
<el-scrollbar>
<div class="scrollbar-flex-content">
<p v-for="item in 50" :key="item" class="scrollbar-horizontal-item">
{{ item }}
</p>
</div>
</el-scrollbar>
<!-- 当元素高度超过最大高度,才会显示滚动条。 -->
<el-button @click="add">Add Item</el-button>
<el-button @click="onDelete">Delete Item</el-button>
<el-scrollbar max-height="150px">
<p v-for="item in count" :key="item" class="scrollbar-height-item">
{{ item }}
</p>
</el-scrollbar>
<!-- 通过使用 setScrollTop 与 setScrollLeft 方法,可以手动控制滚动条滚动。 -->
<el-scrollbar ref="scrollbarRef" height="100px" always @scroll="({ scrollTop }) => {value = scrollTop}">
<div ref="innerRef">
<p v-for="item in 20" :key="item" class="scrollbar-height-item">
{{ item }}
</p>
</div>
</el-scrollbar>
<el-slider v-model="value" :max="max" :format-tooltip="formatTip" @input="(value) => {$refs.scrollbarRef.setScrollTop(value)}"/>
</template>
<script>
export default {
data() {
return {
count: 3,
max: 0,
value: 0
}
}, methods: {
add() {
this.count++
}, onDelete() {
if (this.count > 0) {
this.count--
}
}, formatTip(value){
return `${value} px`
}
}, mounted(){
this.max = this.$refs.innerRef.clientHeight - 80
}
}
</script>
<style scoped>
.scrollbar-height-item {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
margin: 10px;
text-align: center;
border-radius: 4px;
background: var(--el-color-primary-light-9);
color: var(--el-color-primary);
}
.scrollbar-flex-content {
display: flex;
}
.scrollbar-horizontal-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);
}
.el-slider {
margin-top: 20px;
}
</style>
显示效果
Space 间距
通过间距组件来给多个组件之间提供间距
- alignment 对齐的方式,可选值 ‘center’ | ‘normal’ | ‘stretch’ | … 默认center
- class 类名,string/object/array
- direction 排列的方向,可选值 ‘vertical’ | ‘horizontal’ 默认horizontal
- prefix-cls 给 space-items 的类名前缀,string
- style 额外样式,string/object
- spacer 间隔符,string/number/VNode
- size 间隔大小,‘default’ | ‘small’ | ‘large’ / number / array 默认small
- wrap 设置是否自动折行,boolean 默认false
- fill 子元素是否填充父容器,boolean 默认false
- fill-ratio 填充父容器的比例,number 默认100
<template>
<el-space direction="vertical" alignment="start" :size="30">
<!-- 控制间距的大小 -->
<el-radio-group v-model="size">
<el-radio :label="'large'">large</el-radio>
<el-radio :label="'default'">default</el-radio>
<el-radio :label="'small'">small</el-radio>
</el-radio-group>
<!-- 自定义 Size -->
<el-slider v-model="size" style="width: 300px" />
<el-space wrap :size="size" style="width: 600px">
<el-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" text>Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{{ 'List item ' + o }}
</div>
</el-card>
</el-space>
</el-space>
<!-- 垂直布局 -->
<el-space direction="vertical">
<el-card v-for="i in 2" :key="i" class="box-card" style="width: 250px">
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" text>Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{{ 'List item 2-' + o }}
</div>
</el-card>
</el-space>
<!-- 利用 wrap 属性控制换行 -->
<el-space wrap style="width: 600px">
<div v-for="i in 20" :key="i">
<el-button text> Text button </el-button>
</div>
</el-space>
<!-- 字母数字类型分隔符 -->
<el-space :size="size" spacer="|">
<div v-for="i in 2" :key="i">
<el-button> button {{ i }} </el-button>
</div>
</el-space>
<!-- VNode 类型分隔符 -->
<el-space :size="size" :spacer="spacer">
<div v-for="i in 2" :key="i">
<el-button> button {{ i }} </el-button>
</div>
</el-space>
<!-- 使用 alignment 属性来对齐 -->
<div class="alignment-container">
<el-space>
string
<el-button> button </el-button>
<el-card>
<template #header> header </template>
body
</el-card>
</el-space>
</div>
<div class="alignment-container">
<el-space alignment="flex-start">
string
<el-button> button </el-button>
<el-card>
<template #header> header </template>
body
</el-card>
</el-space>
</div>
<div class="alignment-container">
<el-space alignment="flex-end">
string
<el-button> button </el-button>
<el-card>
<template #header> header </template>
body
</el-card>
</el-space>
</div>
<!-- 用 fill 属性让子节点自动填充容器 -->
<!-- 使用 fillRatio 参数,自定义填充的比例, 默认值为 100,代表基于父容器宽度的 100% 进行填充 -->
<div style="margin-bottom: 15px">
direction:
<el-radio v-model="direction" label="horizontal">horizontal</el-radio>
<el-radio v-model="direction" label="vertical">vertical</el-radio>
</div>
<div style="margin-bottom: 15px">
fillRatio:<el-slider v-model="fillRatio" />
</div>
<div style="margin-bottom: 15px">fill: <el-switch v-model="fill" /></div>
<el-space :fill="fill" wrap :fill-ratio="fillRatio" :direction="direction" style="width: 100%">
<el-card v-for="i in 5" :key="i" class="box-card">
<template #header>
<div class="card-header">
<span>Card name</span>
<el-button class="button" text>Operation button</el-button>
</div>
</template>
<div v-for="o in 4" :key="o" class="text item">
{{ 'List item ' + o }}
</div>
</el-card>
</el-space>
</template>
<script>
import { h } from 'vue'
import { ElDivider } from 'element-plus'
export default {
data() {
return {
size: 'default',
spacer: h(ElDivider, { direction: 'vertical' }),
fill: true,
direction: 'horizontal',
fillRatio: 30
}
}
}
</script>
<style>
.alignment-container {
width: 240px;
margin-bottom: 20px;
padding: 8px;
border: 1px solid var(--el-border-color);
}
</style>
显示效果
Typography 排版
字体
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
<template>
<div class="demo-typo-size">
<!-- 字体 -->
<p
style="font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;">
chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng
míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>
<p style="font-family: 'Helvetica Neue';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng
míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>
<p style="font-family: Helvetica;">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng míng
yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>
<p style="font-family: 'PingFang SC';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng
míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>
<p style="font-family: 'Hiragino Sans GB';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu
wàng míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>
<p style="font-family: 'Microsoft YaHei';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng
míng yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>
<p style="font-family: '微软雅黑';">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng míng yuè
举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>
<p style="font-family: Arial;">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng míng yuè
举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>
<p style="font-family: sans-serif;">chuáng qián míng yuè guāng 床前明月光,yí shì dì shàng shuāng 疑是地上霜。jǔ tóu wàng míng
yuè 举头望明月,dī tóu sī gù xiāng 低头思故乡。</p>
</div>
<!-- 字号 -->
<table class="demo-typo-size">
<tbody>
<tr>
<td>Level</td>
<td>Font Size</td>
<td class="color-dark-light">Demo</td>
</tr>
<tr v-for="(fontSize, i) in fontSizes" :key="i" :style="`font-size: var(--el-font-size-${fontSize.type})`">
<td>{{ fontSize.level }}</td>
<td>
{{
fontSize.size +
' ' +
formatType(fontSize.type)
}}
</td>
<td>Build with Element</td>
</tr>
</tbody>
</table>
<!-- 行高 -->
<div>
<ul class="lineH-right" style="width: 300px;">
<!-- line-height:1 无行高 line-height:1.3 紧凑 line-height:1.5 常规 line-height:1.7 宽松 -->
<li style="line-height: 1; background-color: aqua">line-height:1 <span>No line height</span></li>
<li style="line-height: 1.3; background-color:aquamarine">line-height:1.3 <span>Compact</span></li>
<li style="line-height: 1.5; background-color:azure">line-height:1.5 <span>Regular</span></li>
<li style="line-height: 1.7; background-color:bisque">line-height:1.7 <span>Loose</span></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
fontSizes: [
{
level: 'Supplementary text',//辅助文字
type: 'extra-small',
size: '12px'
},
{
level: 'Body (small)',//正文(小)
type: 'small',
size: '13px'
},
{
level: 'Body',//正文
type: 'base',
size: '14px'
},
{
level: 'Small Title',//小标题
type: 'medium',
size: '16px'
},
{
level: 'Title',//标题
type: 'large',
size: '18px'
},
{
level: 'Main Title',//主标题
type: 'extra-large',
size: '20px'
},
],
}
}, methods: {
formatType(type) {
return type
.split('-')
.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
.join(' ')
}
}
}
</script>
<style>.demo-typo-size {
width: 600px;
background-color: cadetblue;
}</style>
显示效果
Config Provider 全局配置
Config Provider 被用来提供全局的配置选项
- locale 翻译文本对象,object {name: string, el: TranslatePair} 默认en
- size 全局组件大小,可选值 ‘large’ | ‘default’ | ‘small’ 默认default
- zIndex 全局初始化 zIndex 的值,number
- namespace 全局组件类名称前缀 (需要配合 $namespace 使用),string 默认el
- button 按钮相关配置, object {autoInsertSpace?: boolean}
- message 消息相关配置, object {max?: number}
- experimental-features 将要添加的实验阶段的功能,所有功能都是默认设置为 false,object
button
- autoInsertSpace 自动在两个中文字符之间插入空格,boolean 默认false
message
- max 可同时显示的消息最大数量,number
<template>
<div>
<el-button @click="toggle">Switch Language</el-button>
<br />
<!-- 配置多语言 -->
<el-config-provider :locale="locale">
<el-table :data="[]" />
<el-pagination :total="100" />
</el-config-provider>
</div>
<!-- 对按钮进行配置 -->
<div class="mb-2">
<div>
<el-checkbox v-model="config.autoInsertSpace">autoInsertSpace</el-checkbox>
</div>
<el-config-provider :button="config">
<el-button>中文</el-button>
</el-config-provider>
</div>
<!-- 对消息进行配置 -->
<div>
<el-config-provider :message="msgConfig">
<el-button @click="open">OPEN</el-button>
</el-config-provider>
</div>
</template>
<script>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { ElMessage } from 'element-plus'
export default {
data() {
return {
language: 'zh-cn',
locale: '',
config: { autoInsertSpace: true },
msgConfig: { max: 3 }
}
},
methods: {
toggle() {
this.language = this.language === 'zh-cn' ? 'en' : 'zh-cn'
this.getLocale();
},
getLocale() {
this.locale = this.language === 'zh-cn' ? zhCn : en
},open(){
ElMessage('This is a message.')
}
},
created() {
this.getLocale();
}
}
</script>
<style>
.mb-1 {
margin-bottom: 1em;
}
.mb-2 {
margin-bottom: 2em;
}
</style>
显示效果
Form 表单组件
自动补全输入框
根据输入内容提供对应的输入建议。