ChatBubble 聊天气泡

像素风格的聊天气泡组件，用于构建对话界面。

?

名称	分类	说明	类型	默认值
placement	? 风格	气泡位置方向	'start' | 'end'	'start'
type	? 风格	颜色类型	'primary' | 'success' | 'info' | 'warning' | 'danger'	—
color	? 颜色	自定义十六进制颜色	string	—
name	? 内容	发送者名称	string	—
time	? 内容	时间戳	string	—
status	? 内容	底部状态文本	string	—
default	? 插槽	气泡消息内容		—
avatar	? 插槽	头像区域		—
header	? 插槽	自定义头部（覆盖 name/time）		—
footer	? 插槽	自定义底部（覆盖 status）		—

基础用法

使用 placement 控制气泡显示的方向。默认为 start（左侧）。

<template>
  <div class="demo-chat">
    <px-chat-bubble name="Alice" time="12:30">
      Hey! How's it going?
    </px-chat-bubble>
    <px-chat-bubble placement="end" name="Bob" time="12:31">
      Pretty good, thanks! Working on a pixel art project.
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

类型

使用 type 属性设置气泡的颜色主题。

<template>
  <div class="demo-chat">
    <px-chat-bubble type="primary">Primary message</px-chat-bubble>
    <px-chat-bubble type="success">Success message</px-chat-bubble>
    <px-chat-bubble type="info">Info message</px-chat-bubble>
    <px-chat-bubble type="warning">Warning message</px-chat-bubble>
    <px-chat-bubble type="danger">Danger message</px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

头像

使用 avatar 插槽在气泡旁添加头像。

<template>
  <div class="demo-chat">
    <px-chat-bubble name="Alice" time="12:30">
      <template #avatar>
        <px-avatar size="small">A</px-avatar>
      </template>
      Hey! Check out this pixel art.
    </px-chat-bubble>
    <px-chat-bubble placement="end" name="Bob" time="12:31">
      <template #avatar>
        <px-avatar size="small">B</px-avatar>
      </template>
      Looks awesome!
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

头部和底部

使用 name、time 和 status 属性来显示发送者信息和投递状态。

<template>
  <div class="demo-chat">
    <px-chat-bubble name="Alice" time="12:30" status="Delivered">
      I'll send you the files tonight.
    </px-chat-bubble>
    <px-chat-bubble placement="end" name="Bob" time="12:31" status="Seen">
      Great, no rush!
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

自定义颜色

使用 color 属性为气泡设置自定义十六进制颜色。

<template>
  <div class="demo-chat">
    <px-chat-bubble color="#8b5cf6" name="Violet">
      Custom purple bubble!
    </px-chat-bubble>
    <px-chat-bubble placement="end" color="#f59e0b" name="Amber">
      Custom amber bubble!
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

对话

组合多个聊天气泡来构建完整的对话布局。

<template>
  <div class="demo-chat">
    <px-chat-bubble name="Alice" time="14:00">
      <template #avatar>
        <px-avatar size="small">A</px-avatar>
      </template>
      Have you tried the new pixel component library?
    </px-chat-bubble>
    <px-chat-bubble placement="end" type="primary" name="Bob" time="14:01">
      <template #avatar>
        <px-avatar size="small">B</px-avatar>
      </template>
      Yes! Sakana Element is great for retro-themed UIs.
    </px-chat-bubble>
    <px-chat-bubble name="Alice" time="14:02" status="Delivered">
      <template #avatar>
        <px-avatar size="small">A</px-avatar>
      </template>
      I love the pixel borders and drop shadows.
    </px-chat-bubble>
    <px-chat-bubble placement="end" type="success" name="Bob" time="14:03" status="Seen">
      <template #avatar>
        <px-avatar size="small">B</px-avatar>
      </template>
      The ChatBubble component even has a stepped pixel tail!
    </px-chat-bubble>
  </div>
</template>

<style scoped>
.demo-chat {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>