Welcome 欢迎 🌹
介绍
Welcome
这个组件可以清晰传达给用户可实现的意图范围和预期功能。使用合适的欢迎推荐组件,可以有效降低用户学习成本,让用户快速了解并顺利开始。
代码演示
基本使用
欢迎来到 Element Plus X 🦋
欢迎使用 Element Plus X 💖
这是描述信息 ~
欢迎使用 Element Plus X 💖
这是描述信息 ~
欢迎使用 Element Plus X 💖
副标题
这是描述信息 ~
样式变体
欢迎来到 Element Plus X 🦋
欢迎使用 Element Plus X 💖
这是描述信息 ~
欢迎使用 Element Plus X 💖
这是描述信息 ~
欢迎使用 Element Plus X 💖
副标题
这是描述信息 ~
背景颜色
切换布局:
欢迎来到 Element Plus X 🦋
欢迎使用 Element Plus X 💖
这是描述信息 ~
欢迎使用 Element Plus X 💖
这是描述信息 ~
欢迎使用 Element Plus X 💖
副标题
这是描述信息 ~
欢迎来到 Element Plus X 🦋
欢迎使用 Element Plus X 💖
这是描述信息 ~
欢迎使用 Element Plus X 💖
这是描述信息 ~
欢迎使用 Element Plus X 💖
副标题
这是描述信息 ~
自定义图片

欢迎使用 Element Plus X 💖
用 vue3 对 ant-design-x 的复刻。后续将会集成 AI 工作流编排组件 和 md 多功能渲染组件,给 Vue 开发社区 一个好用的 AI 组件库
自定义副标题
欢迎使用 Element Plus X 💖
用 vue3 对 ant-design-x 的复刻。后续将会集成 AI 工作流编排组件 和 md 多功能渲染组件,给 Vue 开发社区 一个好用的 AI 组件库
属性
属性名 | 类型 | 是否必填 | 默认值 | 描述 |
---|---|---|---|---|
variant | string | 否 | filled | 组件样式变体(filled/borderless) |
direction | string | 否 | ltr | 文本方向(ltr/rtl) |
icon | string | 否 | - | 图标URL地址 |
title | string | 否 | - | 主标题文本内容 |
extra | string | 否 | - | 副标题文本内容 |
description | string | 否 | - | 描述文本内容 |
className | string | 否 | - | 容器外层自定义类名 |
rootClassName | string | 否 | - | 根节点自定义类名 |
classNames | object | 否 | - | 各部分自定义类名({ icon, title, extra, description }) |
style | object | 否 | - | 容器外层自定义样式 |
styles | object | 否 | - | 各部分自定义样式({ icon, title, extra, description }) |
prefixCls | string | 否 | welcome | 组件类名前缀 |
插槽
插槽名 | 参数 | 类型 | 描述 |
---|---|---|---|
#image | - | Slot | 自定义欢迎图片内容 |
#extra | - | Slot | 自定义副标题内容 |
功能特性
- 通过
variant
属性目前暂时支持filled
(填充)和borderless
(无边框)两种视觉风格 - 支持
direction
属性控制文本方向 - 可通过
classNames
和styles
细粒度控制样式 - 支持
image
、extra
插槽扩展自定义内容