ElementPlus 教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Select 选择器 当选项过多时，使用下拉菜单展示并选择内容。 基础用法 适用广泛的基础单选 v-model的值为当前被选中的el-option的 value 属性值 <t…

Cascader 级联选择器 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指…

Switch 开关 表示两种相互对立的状态间的切换，多用于触发「开/关」。 基本用法 绑定v-model到一个Boolean类型的变量。可以使用active-color属性与ina…

通过拖动滑块在一个固定区间内进行选择 基础用法 在拖动滑块时，显示当前值 通过设置绑定值自定义滑块的初始值 <template> <div class=”bloc…