SuperAPI AI 工具集

el-divider

通用与其它

查看项目

更新于 10-15 23:32

技能介绍

用途:el-divider 是 Element Plus 提供的分隔线组件,用于在内容之间创建分隔线,实现内容分隔、区块划分、视觉分组与布局组织。当用户需要在内容区块之间添加水平或垂直分隔线时调用。

主要能力:支持水平与垂直两种方向;支持通过 border-style 设置分隔线样式(如 dashed 虚线);支持通过 content-position 控制分隔线上自定义内容的位置(left、center、right);提供默认插槽用于放置分隔线上的自定义内容。

使用方式:基础用法为在模板中直接使用 <el-divider /> 分隔上下内容。自定义内容可写为 <el-divider content-position="left">Left</el-divider>,位置可选 left、center、right。虚线样式使用 <el-divider border-style="dashed" />。垂直分隔线使用 <el-divider direction="vertical" />,通常配合 flex 布局在行内元素之间使用。

API:属性 direction 取值为 'horizontal' | 'vertical',默认 'horizontal';border-style 为 CSS border-style,默认 'solid';content-position 取值为 'left' | 'right' | 'center',默认 'center'。插槽 default 用于自定义分隔线上的内容。

最佳实践:行内分隔使用 direction="vertical";需要更柔和的分隔效果时使用 border-style="dashed";用 content-position 调整内容位置。

限制:资料未提供主题定制、事件、方法及无障碍相关说明,暂未提供。