VueChat

Appearance

Welcome 欢迎 👏🏻 ​

介绍 ​

Welcome 组件能够清晰地向用户传达可实现的操作范围和主要功能。通过合理设计的欢迎推荐内容，可以有效降低用户的学习门槛，帮助其快速了解系统并顺利上手使用。

基础用法 ​

使用 title、description、icon 和 extra 来定义Welcome的样式。

欢迎使用 VueChat 🌹


欢迎使用 VueChat 🌹

描述信息

欢迎图标

欢迎使用 VueChat 🌹

额外信息
描述信息
基础用法
Welcome 组件的基础用法
<template>
  <Welcome title="欢迎使用 VueChat 🌹" />
  <br />
  <Welcome title="欢迎使用 VueChat 🌹" description="描述信息" />
  <br />
  <Welcome title="欢迎使用 VueChat 🌹" description="描述信息"
    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
    extra="额外信息" />
</template>
<script setup lang="ts">
// import Welcome from '@/components/Welcome/Welcome.vue'
import { Welcome } from 'vue-chat-pro'
</script>
<style></style>

变体 ​

通过设置 variant 属性为 filled 或 borderless 来定义 Welcome 的样式。通过设置 directions 属性为 left 或 right 来定义 Welcome 的布局方向。

欢迎图标

欢迎使用 VueChat 🌹

描述信息

欢迎图标

欢迎使用 VueChat 🌹

描述信息

欢迎图标

欢迎使用 VueChat 🌹

描述信息

欢迎图标

欢迎使用 VueChat 🌹

描述信息
变体
Welcome 组件的变体
<template>
  <Welcome title="欢迎使用 VueChat 🌹" description="描述信息"
    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp">
    <template #extra>
      <el-button size="small" round type="primary">Round el-button</el-button>
    </template>
  </Welcome>
  <br />
  <Welcome title="欢迎使用 VueChat 🌹" description="描述信息" variant="borderless"
    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp">
    <template #extra>
      <el-button size="small" round type="primary">Round el-button</el-button>
    </template>
  </Welcome>
  <br />
  <Welcome title="欢迎使用 VueChat 🌹" description="描述信息" directions="left"
    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp">
    <template #extra>
      <el-button size="small" round type="primary">Round el-button</el-button>
    </template>
  </Welcome>
  <br />
  <Welcome title="欢迎使用 VueChat 🌹" description="描述信息" directions="right" variant="borderless"
    icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp">
    <template #extra>
      <el-button size="small" round type="primary">Round el-button</el-button>
    </template>
  </Welcome>
</template>
<script setup lang="ts">
import Welcome from '@/components/Welcome/Welcome.vue'
</script>
<style></style>

自定义样式 ​

通过设置 styles 属性来定义 Welcome 各部分的自定义样式 icon, title, extra, description。

欢迎使用 VueChat 🌹

额外信息
描述信息
自定义样式
Welcome 组件的自定义样式
<template>
  <Welcome title="欢迎使用 VueChat 🌹" description="描述信息" :styles="titleStyle" extra="额外信息">
  </Welcome>
</template>
<script setup lang="ts">
import Welcome from '@/components/Welcome/Welcome.vue'
import type { WelcomeStyles } from '@/components/Welcome/types'
const titleStyle: WelcomeStyles = {
  'title': {
    color: 'blue',
    fontSize: '20px',
  }, 'extra': {
    color: 'green',
    fontSize: '16px',
  }
}
</script>
<style></style>

插槽 ​

使用 icon 和 extra 插槽来定义Welcome的样式。

欢迎使用 VueChat 🌹

描述信息
使用插槽
Welcome 组件的使用插槽
<template>
  <Welcome title="欢迎使用 VueChat 🌹" description="描述信息">
    <template #icon>
      <el-image
        src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"></el-image>
    </template>
    <template #extra>
      <el-button size="small" round type="primary">Round Button</el-button>
    </template>
  </Welcome>
</template>
<script setup lang="ts">
import Welcome from '@/components/Welcome/Welcome.vue'
</script>
<style></style>

Welcome Attributes ​

属性名类型是否必填默认值描述
variantstring否filled组件样式变体（filled/borderless）
directionstring否left文本方向（left/right）
iconstring否-图标 URL 地址
titlestring否-主标题文本内容
extrastring | VNode否-副标题文本内容
descriptionstring否-描述文本内容
styleobject否-容器外层自定义样式
stylesobject否-各部分自定义样式（{ icon, title, extra, description }）

Welcome Slot ​

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