Skip to content

介绍

Welcome 这个组件可以清晰传达给用户可实现的意图范围和预期功能。使用合适的欢迎推荐组件,可以有效降低用户学习成本,让用户快速了解并顺利开始。

代码演示

基本使用

样式变体

背景颜色

自定义图片

自定义副标题

自定义主题

通过 ConfigProvider.themeOverrides 覆盖 Welcome 的主题变量。完整变量表与可复制模板见:

属性

属性名类型是否必填默认值描述
variantstringfilled组件样式变体(filled/borderless)
directionstringltr文本方向(ltr/rtl)
iconstring-图标URL地址
titlestring-主标题文本内容
extrastring-副标题文本内容
descriptionstring-描述文本内容
classNamestring-容器外层自定义类名
rootClassNamestring-根节点自定义类名
classNamesobject-各部分自定义类名({ icon, title, extra, description })
styleobject-容器外层自定义样式
stylesobject-各部分自定义样式({ icon, title, extra, description })
prefixClsstringwelcome组件类名前缀

插槽

插槽名参数类型描述
#image-Slot自定义欢迎图片内容
#extra-Slot自定义副标题内容

功能特性

  1. 通过 variant 属性目前暂时支持 filled(填充)和 borderless(无边框)两种视觉风格
  2. 支持 direction 属性控制文本方向
  3. 可通过 classNamesstyles 细粒度控制样式
  4. 支持 imageextra 插槽扩展自定义内容

API 标准表

Props

属性类型默认值说明
...WelcomePropsvue-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 的扩展能力。