Welcome 欢迎 🌹
介绍
Welcome 这个组件可以清晰传达给用户可实现的意图范围和预期功能。使用合适的欢迎推荐组件，可以有效降低用户学习成本，让用户快速了解并顺利开始。
代码演示
基本使用
快速创建一个 欢迎卡片
vue
<script setup lang="ts">
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 12px;">
<Welcome
title="欢迎来到 Element Plus X 🦋"
/>
<Welcome
title="欢迎使用 Element Plus X 💖"
description="这是描述信息 ~"
/>
<Welcome
icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
title="欢迎使用 Element Plus X 💖"
description="这是描述信息 ~"
/>
<Welcome
icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
title="欢迎使用 Element Plus X 💖"
extra="副标题"
description="这是描述信息 ~"
/>
</div>
</template>
<style scoped lang="less">
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
样式变体
快速切换多种样式，目前只有两种，filled 和 borderless。默认为 filled。
vue
<script setup lang="ts">
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 12px;">
<Welcome
variant="borderless"
title="欢迎来到 Element Plus X 🦋"
/>
<Welcome
variant="borderless"
title="欢迎使用 Element Plus X 💖"
description="这是描述信息 ~"
/>
<Welcome
icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
variant="borderless"
title="欢迎使用 Element Plus X 💖"
description="这是描述信息 ~"
/>
<Welcome
icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
variant="borderless"
title="欢迎使用 Element Plus X 💖"
extra="副标题"
description="这是描述信息 ~"
/>
</div>
</template>
<style scoped lang="less">
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
背景颜色
设置 布局方法 ltr 从左到右 和 rtl 从右到左，更多属性，控制样式，详情可查看 属性 列表。
vue
<script setup lang="ts">
import type { WelcomeProps } from 'vue-element-plus-x/types/Welcome'
import { Refresh } from '@element-plus/icons-vue'
const bgColor = ref('linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)')
const value = ref<WelcomeProps['direction']>('ltr')
// 生成随机的渐变颜色
function generateGradientColor(): string {
const randomBrightColor = () => {
// 为了保证颜色是亮色调，将取值范围设置为 128 - 255
const r = Math.floor(Math.random() * 128) + 128
const g = Math.floor(Math.random() * 128) + 128
const b = Math.floor(Math.random() * 128) + 128
return `rgba(${r}, ${g}, ${b}, 0.2)`
}
const color1 = randomBrightColor()
const color2 = randomBrightColor()
const color3 = randomBrightColor()
return `linear-gradient(to bottom right, ${color1}, ${color2}, ${color3})`
}
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; gap: 12px; align-items: center;">
<el-button
type="warning"
style="width: fit-content;"
@click="bgColor = generateGradientColor()"
>
设置你喜欢的背景颜色 <el-icon><Refresh /></el-icon>
</el-button>
<span>切换布局：</span> <el-switch v-model="value" active-value="ltr" inactive-value="rtl" />
</div>
<Welcome
:direction="value"
title="欢迎来到 Element Plus X 🦋"
:style="{ background: bgColor }"
/>
<Welcome
:direction="value"
title="欢迎使用 Element Plus X 💖"
description="这是描述信息 ~"
:style="{ background: bgColor }"
/>
<Welcome
:direction="value"
icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
title="欢迎使用 Element Plus X 💖"
description="这是描述信息 ~"
:style="{ background: bgColor }"
/>
<Welcome
:direction="value"
icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
title="欢迎使用 Element Plus X 💖"
extra="副标题"
description="这是描述信息 ~"
:style="{ background: bgColor }"
/>
<Welcome
:direction="value"
variant="borderless"
title="欢迎来到 Element Plus X 🦋"
:style="{ background: bgColor }"
/>
<Welcome
:direction="value"
variant="borderless"
title="欢迎使用 Element Plus X 💖"
description="这是描述信息 ~"
:style="{ background: bgColor }"
/>
<Welcome
:direction="value"
icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
variant="borderless"
title="欢迎使用 Element Plus X 💖"
description="这是描述信息 ~"
:style="{ background: bgColor }"
/>
<Welcome
:direction="value"
icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
variant="borderless"
title="欢迎使用 Element Plus X 💖"
extra="副标题"
description="这是描述信息 ~"
:style="{ background: bgColor }"
/>
</div>
</template>
<style scoped lang="less">
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
自定义图片
方便更换自定义的 图片
vue
<script setup lang="ts">
const bgColor = 'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)'
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 12px;">
<Welcome
variant="borderless"
:style="{ background: bgColor }"
title="欢迎使用 Element Plus X 💖"
description="用 vue3 对 ant-design-x 的复刻。后续将会集成 AI 工作流编排组件 和 md 多功能渲染组件，给 Vue 开发社区 一个好用的 AI 组件库"
>
<template #image>
<img src="https://element-plus-x.com/logo.png" style="width: 80px;">
</template>
</Welcome>
</div>
</template>
<style scoped lang="less">
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
自定义副标题
方便自己定义 副标题内容
vue
<script setup lang="ts">
const bgColor = 'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)'
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 12px;">
<Welcome
direction="rtl"
icon="https://element-plus-x.com/logo.png"
variant="borderless"
:style="{ background: bgColor }"
title="欢迎使用 Element Plus X 💖"
description="用 vue3 对 ant-design-x 的复刻。后续将会集成 AI 工作流编排组件 和 md 多功能渲染组件，给 Vue 开发社区 一个好用的 AI 组件库"
>
<template #extra>
<el-button link type="primary">
关于我
</el-button>
</template>
</Welcome>
</div>
</template>
<style scoped lang="less">
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
属性
| 属性名 | 类型 | 是否必填 | 默认值 | 描述 |
|---|---|---|---|---|
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插槽扩展自定义内容