对话气泡

用于对话内容展示

基本使用

今天的天气怎么样？

通过 placement 设置显示位置

今天的天气怎么样？

今天天气晴朗，万里无云

设置头像

今天的天气怎么样？

展示文件

今天的天气怎么样？

点击查看代码

<template>
  <!-- 基本使用 -->
  <hi-bubble content="今天的天气怎么样？"></hi-bubble>

  <!-- 通过 placement 设置显示位置 -->
  <hi-bubble content="今天的天气怎么样？" placement="start"> </hi-bubble>
  <hi-bubble content="今天天气晴朗，万里无云" placement="end"> </hi-bubble>

  <!-- 设置头像 -->
  <hi-bubble
    content="今天的天气怎么样？"
    placement="start"
    :show-avatar="true"
    avatar="https://pangea.hisense.com/img/pangea.svg"
  >
  </hi-bubble>

  <!-- 展示文件 -->
  <hi-bubble
    content="今天的天气怎么样？"
    placement="start"
    :files="files"
    :show-avatar="true"
    avatar="https://pangea.hisense.com/img/pangea.svg"
  >
  </hi-bubble>
</template>
<script lang="ts" setup>
import HiBubble from "pangea-component/hi-bubble";
import "pangea-component/dist/style.css";

const files = [
  {
    name: "盘古图片",
    url: "https://pangea.hisense.com/img/adv/adv-index-forum.jpg",
    type: "jpg",
  },
  {
    name: "图片1",
    url: "https://pangea.hisense.com/img/index/pangea-scaffold@2x.png",
    type: "png",
  },
];
</script>

安装方式

yarn add pangea-component

引用方式

import HiBubble from "pangea-component/hi-bubble";
import "pangea-component/dist/style.css";

API

Props

参数名	描述	类型	默认值
content	聊天内容	string	-
placement	气泡位置	start | end	end
status	气泡状态	success | fail | loading	success
showAvatar	是否显示头像	boolean	false
avater	头像	string | VNode	-
pageJson	工作卡 json	object	-
files	气泡展示的文件	MessageFileItem[]	-

interface MessageFileItem {
  name: string; // 文件名称
  url: string; // 文件地址
  type: string; // 文件类型
}

Slot

插槽名	描述	参数
header	气泡顶部内容	-
footer	气泡底部内容	-
default	自定义气泡内容区域	-

使用示例

<template>
  <hi-bubble content="今天的天气怎么样？" placement="start"> </hi-bubble>
  <hi-bubble content="今天天气晴朗，万里无云" placement="end"> </hi-bubble>
</template>
<script lang="ts" setup>
  import HiBubble from "pangea-component/hi-bubble";
  import "pangea-component/dist/style.css";
</script>