TPrBubble

基础用法

<template>
  <t-pr-bubble
    :is-footer="true"
    footer-ico-size="18px"
    position="right"
    :content="content"
    is-markdown
    is-radius
  >
  </t-pr-bubble>
</template>
<script setup lang="ts">
import { ref } from "vue"

let content = ref(
  "我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content"
)
</script>
<style lang="scss" scoped></style>

头像显示

显示隐藏

头像显示

使用isAvatar属性，控制头像是否显示。

<template>
  <div>
    <el-radio-group v-model="isAvatar" style="margin-bottom: 10px">
      <el-radio-button label="显示" :value="true" />
      <el-radio-button label="隐藏" :value="false" />
    </el-radio-group>
    <t-pr-bubble
      :is-footer="true"
      footer-ico-size="18px"
      :is-avatar="isAvatar"
      :content="content"
      is-markdown
      is-radius
    >
    </t-pr-bubble>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
let isAvatar = ref(true)
let content = ref(
  "我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content"
)
</script>
<style lang="scss" scoped></style>

头像方向

左右

头像方向

使用position属性，控制头像所在的位置。

<template>
  <div>
    <el-radio-group v-model="position" style="margin-bottom: 10px">
      <el-radio-button label="左" value="left" />
      <el-radio-button label="右" value="right" />
    </el-radio-group>
    <t-pr-bubble
      :is-footer="true"
      footer-ico-size="18px"
      :position="position"
      :content="content"
      is-markdown
      is-radius
    >
    </t-pr-bubble>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
let position = ref("left")
let content = ref(
  "我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content"
)
</script>
<style lang="scss" scoped></style>

头像形状

圆形方形

头像形状

使用avatarShape属性，控制头像形状。

<template>
  <div>
    <el-radio-group v-model="avatarShape" style="margin-bottom: 10px">
      <el-radio-button label="圆形" value="circle" />
      <el-radio-button label="方形" value="square" />
    </el-radio-group>
    <t-pr-bubble
      :is-footer="true"
      footer-ico-size="18px"
      :avatar-shape="avatarShape"
      :content="content"
      is-markdown
      is-radius
    >
    </t-pr-bubble>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
let avatarShape = ref("circle")
let content = ref(
  "我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content"
)
</script>
<style lang="scss" scoped></style>

加载状态

思考中

加载状态

使用loading属性，控制是否是加载状态。

<template>
  <t-pr-bubble
    :is-footer="true"
    footer-ico-size="18px"
    position="right"
    :loading="loading"
    :content="content"
    is-markdown
    is-radius
  >
  </t-pr-bubble>
</template>
<script setup lang="ts">
import { ref } from "vue"

let content = ref(
  "我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content"
)
let loading = ref(true)

setTimeout(() => {
  loading.value = false
}, 5000)
</script>
<style lang="scss" scoped></style>

以md文档格式显示

显示文本显示md

# 一级标题 - 列表1 - 列表2 - 列表3 ```js //js函数 function changeUrlUse(abc : string) :string { console.log(abc) return abc } ```

头像形状

使用avatarShape属性，控制头像形状。

<template>
  <div>
    <el-radio-group v-model="isMarkdown" style="margin-bottom: 10px">
      <el-radio-button label="显示文本" :value="false" />
      <el-radio-button label="显示md" :value="true" />
    </el-radio-group>
    <t-pr-bubble footer-ico-size="18px" :content="content" :is-markdown="isMarkdown" is-radius>
    </t-pr-bubble>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
let isMarkdown = ref(false)
let content = ref(
  `# 一级标题

- 列表1
- 列表2
- 列表3
\`\`\`js
//js函数
function changeUrlUse(abc : string) :string {
	console.log(abc)
  return abc
}
\`\`\``
)
</script>
<style lang="scss" scoped></style>

docs 插槽

我是docs插槽

docs插槽

使用docs插槽，is-docs属性暂时仅判断docs是否显示。

<template>
  <t-pr-bubble
    is-docs
    footer-ico-size="18px"
    :position="position"
    :content="content"
    is-markdown
    is-radius
  >
    <template #docs>
      <div>我是docs插槽</div>
    </template>
  </t-pr-bubble>
</template>
<script setup lang="ts">
import { ref } from "vue"
let position = ref("right")
let content = ref(
  "我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content我是content"
)
</script>
<style lang="scss" scoped></style>

配置参数

参数	说明	类型	默认值
position	气泡位置	string	left
content	显示信息	string	无
isAvatar	是否显示头像	boolean	true
avatar	头像 url	string	无
avatarShape	头像形状	string	square
avatarSize	头像大小	string	30px
isFooter	是否显示 footer	boolean	false
isCopy	是否显示复制按钮	boolean	true
isRefresh	是否显示刷新按钮	boolean	true
isDocs	是否显示 docs	boolean	false
isMarkdown	是否显示 md	boolean	false
error	是否处于失败状态	boolean	false
errorContent	失败回显信息	string	系统异常，请重新提问。
loading	气泡是否是 loading 状态	boolean	false
loadingDotSize	loading 点的大小	string	6px
loadingBackground	loading 的颜色	string	#409eff
loadingGap	loading 点的间隔	string	0.3em
isRadius	气泡是否有圆角	boolean	true
contentRadius	气泡圆角大小	string	8px
contentBackground	气泡颜色	string	#f0f2f5
contentColor	气泡文字颜色	string	#000000
refreshFun	刷新函数	Function	无
footerIcoSize	footer 图标大小	string	16px

插槽

插槽名	说明
avatar	头像插槽
header	header插槽
content	content插槽
footer	footer插槽
prevFooter	footer前置插槽
nextFooter	footer后置插槽
docs	docs插槽
loading	loading插槽