ElementPlus 教程
ElementPlus Avatar 头像
Avatar 头像 用图标、图片或者字符的形式展示用户或事物信息。 基本用法 通过 shape 和 size 设置头像的形状和大小。 <…
ElementPlus Skeleton 骨架屏
Skeleton 骨架屏 在需要等待加载内容的位置设置一个骨架屏,某些场景下比 Loading 的视觉效果更好。 基础用法 基础的骨架效果。 <template> &l…
ElementPlus Empty 空状态
Empty 空状态 空状态时的占位提示。 基础用法 <template> <el-empty description=”描述文字”></el-empt…
ElementPlus Descriptions 描述列表
Descriptions 描述列表 列表形式展示多个字段。 基础用法 <template> <el-descriptions title=”用户信息”> &…
ElementPlus Result 结果
Result 结果 用于对用户的操作结果或者异常状态做反馈。 基础用法 <template> <el-row> <el-col :sm=”12″ :l…
ElementPlus Alert 警告
Alert 警告 用于页面中展示重要的提示信息。 基本用法 页面中的非浮层元素,不会自动消失。 Alert 组件提供四种主题,由type属性指定,默认值为info。 <tem…
ElementPlus Loading 加载
Loading 加载 加载数据时显示动效。 区域加载 在表格等容器中加载数据时显示。 Element Plus 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令v…
ElementPlus Message 消息提示
Message 消息提示 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 基础用法 从顶部出现,3 秒后自动消失。 Messa…
ElementPlus MessageBox 弹框
MessageBox 弹框 模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。 从场景上说,MessageBox 的作用是美化系统自带的 …
ElementPlus Notification 通知
Notification 通知 悬浮出现在页面角落,显示全局的通知提醒消息。 基本用法 适用性广泛的通知栏 Notification 组件提供通知功能,Element Plus 注…
ElementPlus Affix 固钉
Affix 固钉 将页面元素固定在特定可视区域。 基本用法 固钉默认固定在页面顶部。 通过设置 offset 属性来改变吸顶距离,默认值为 0。 <tem…
ElementPlus NavMenu 导航菜单
NavMenu 导航菜单 为网站提供导航功能的菜单。 顶栏 适用广泛的基础用法。 导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式。另外,在菜单中通过sub-m…
ElementPlus Tabs 标签页
Tabs 标签页 分隔内容上有关联但属于不同类别的数据集合。 基础用法 基础的、简洁的标签页。 用户管理配置管理角色管理定时任务补偿配置管理 Tabs 组件提供了选项卡功能,默认选…
ElementPlus Breadcrumb 面包屑
Breadcrumb 面包屑 显示当前页面的路径,快速返回之前的任意页面。 基础用法 适用广泛的基础用法。 在el-breadcrumb中使用el-breadcrumb-item标…
ElementPlus PageHeader 页头
PageHeader 页头 如果页面的路径比较简单,推荐使用页头组件而非面包屑组件。 基础用法 <template> <el-page-header @back=…
ElementPlus Dropdown 下拉菜单
Dropdown 下拉菜单 将动作或菜单折叠到下拉菜单中。 基础用法 移动到下拉菜单上,展开更多操作。 通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdow…
ElementPlus Steps 步骤条
Steps 步骤条 引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。 基础用法 简单的步骤条。 设置active属性,接受一个Number,…
ElementPlus Dialog 对话框
Dialog 对话框 在保留当前页面状态的情况下,告知用户并承载相关操作。 基本用法 Dialog 弹出一个对话框,适合需要定制性更大的场景。 需要设置 model-va…
ElementPlus Tooltip 文字提示
Tooltip 文字提示 常用于展示鼠标 hover 时的提示信息。 基础用法 在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。 使用cont…
ElementPlus Popover 弹出框
Popover 弹出框 基础用法 Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文…