Appearance
介绍
Welcome 这个组件可以清晰传达给用户可实现的意图范围和预期功能。使用合适的欢迎推荐组件,可以有效降低用户学习成本,让用户快速了解并顺利开始。
代码演示
基本使用
样式变体
背景颜色
自定义图片
自定义副标题
自定义主题
通过 ConfigProvider.themeOverrides 覆盖 Welcome 的主题变量。完整变量表与可复制模板见:
属性
| 属性名 | 类型 | 是否必填 | 默认值 | 描述 |
|---|---|---|---|---|
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插槽扩展自定义内容
API 标准表
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
...WelcomeProps | vue-element-plus-x/types/Welcome | - | 透传 Element Plus X Welcome 原生属性。 |
Events
当前无包装层事件,底层原生监听会通过 attrs 透传。
Slots
所有传入 slot 名称都会动态透传到底层 Welcome。
Exposes
当前无公开 expose 方法。
样式入口
ts
import '@zhiyongui/lingxi-ui/ai-welcome/style.css'FAQ
为什么没有固定 slot 列表?
AiWelcome 会转发当前组件收到的全部具名 slot,以兼容底层 Welcome 的扩展能力。