ElementPlus 教程

使用组件 完整引入所有组件 主文件 import { createApp } from vue import ElementPlus from element-plus impor…

国际化 ElementPlus 组件内部默认使用英语，若希望使用其他语言，可以参考下面的方案。 全局配置 ElementPlus 提供了全局配置国际化的设置。 import Ele…

本文档将帮助你从 Element 2.x 升级至 Element Plus. 不兼容更新 以下是不兼容更新的列表 本文档有待完善，目前请参考这里的 不兼容更新列表。

自定义主题 Element Plus 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了四种方法，可以进行不同程度的样式自定义。 仅替换主题色 如果…

内置过渡动画 Element Plus 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 transition 组件文档 。 fade 淡入淡出 …

Layout 布局 通过基础的 24 分栏，迅速简便地创建布局。  组件默认采用了 flex 布局，无需手动设置 type=”flex”…

Container 布局容器 用于布局的容器组件，方便快速搭建页面的基本结构： <el-container>：外层容器。当子元素中包含 <el-head…

Color 色彩 Element Plus 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。 主色 Element Plus 主要品牌…

Typography 字体 我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。 字体 字号层级字体大小举例辅助文字12px Extra Small用 Element P…

Border 边框 我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。 边框 我们提供了以下几种边框样式，以供选择。 名称 粗细 举例 实线 1px ————————————…

Icon 图标 提供了一套常用的图标集合。 Element Plus 团队正在将原有组件内的 Font Icon 向 SVG Icon 迁移…

Button 按钮 常用的操作按钮。 基础用法 基础的按钮用法。 使用​type​、​plain​、​round​和​circle​属性来定义 Button 的样式。 <te…

Link 文字链接 文字超链接 基础用法 基础的文字链接用法。 <template> <div> <el-link href=”https://ele…

Space 间距 虽然我们拥有 Divider 组件, 但很多时候我们需要不是一个被 Divider 组件 分割开的页面结构, 因此我们会重复的使用很…

Scrollbar 滚动条 用于替换浏览器原生滚动条。 基础用法 通过 ​height ​属性设置滚动条高度，若不设置则根据父容器高度自适应。 <temp…

Config Provider 被用来提供全局的配置选项，让你的配置能够在全局都能够被访问到，Config Provider 使用了 Vue 的 provide/inje…

在一组备选项中进行单选 基础用法 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。 要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变…

Checkbox 多选框 一组备选项中进行多选 基础用法 单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。 在el-checkbox元素中定…

nput 输入框 通过鼠标或键盘输入字符 Input 为受控组件，它总会显示 Vue 绑定值。 通常情况下，应当处理 input 事件，并更新组件的绑定值（或使…

InputNumber 计数器 仅允许输入标准的数字值，可定义范围 基础用法 要使用它，只需要在el-input-number元素中使用v-model绑定变量即可，变量的初始值即为…