Vue Chat Button

Vue 3 聊天按钮组件，支持徽章、弹窗、固定定位、环境配置和自定义主题。

安装

npm i vue-chat-button-simple
# 或
yarn add vue-chat-button-simple
# 或
pnpm add vue-chat-button-simple

使用方法

全局注册

import { createApp } from 'vue'
import VueChatButton from 'vue-chat-button'
import 'vue-chat-button/dist/vue-chat-button.css'

const app = createApp(App)
app.use(VueChatButton)
app.mount('#app')

组件单独使用

<template>
  <div class="container">
    <!-- 默认配置 -->
    <chat-button-with-badge :params="params" />

    <!-- 设置固定位置 -->
    <chat-button-with-badge :fixedOffset="{ x: 80, y: 100 }" :params="params" />

    <div class="section">
      <h2>发送订单/销售单, 发送订单时，params</h2>
      <chat-button-with-badge :is-fixed="false" :show-badge="false" :autoOpenModal="false" :params="params" isOrder />
    </div>

    <div class="section">
      <h2>自定义颜色</h2>
      <chat-button-with-badge icon-color="#000" theme-color="white" :is-fixed="false" :params="params" />
    </div>

    <div class="section">
      <h2>在新标签页显示</h2>

      <div>
        <h3>默认跳转当前会话页面</h3>
        <chat-button-with-badge :is-fixed="false" isOpenTab :params="params" />

        <h3>跳转指定页面</h3>
        <chat-button-with-badge :is-fixed="false" isOpenTab :params="params" isOrder path="/chat?customer_id=123" />
      </div>
    </div>

    <!-- 聊天模态框测试 -->
    <div class="section">
      <h2>聊天模态框</h2>
      <div class="demo-area">
        <button @click="openModal" class="open-modal-btn">打开聊天窗口</button>
      </div>
    </div>

    <!-- 聊天模态框组件 -->
    <chat-modal v-model:visible="modalVisible" :title="modalTitle" @message-sent="handleMessageSent" @modal-close="handleModalClose" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ChatButtonWithBadge, ChatModal } from 'vue-chat-button-simple'
import 'vue-chat-button-simple/dist/vue-chat-button-simple.css'

const modalVisible = ref(false)
const modalTitle = ref('在线客服')

const params = ref({
  source_sys: 'CLNT', //来源系统（必填，有效值：XUAN-选品网、CLNT-客户后台、OPER-新运营平台）
  source_page: window.location.href,
  custom_params: {
    // 【选填】
    uid: 'WM202505221529531472', //客户uid
    order_number: 'BXY2507041337460', //订单编号
    after_sale_number: 'AS202507041508577628', //售后单号
  }, //第三方自定义参数
})

const handleMessageSent = (message: string) => {
  console.log(`发送消息: ${message}`)
}

const handleModalClose = () => {
  console.log('模态框被关闭')
  modalVisible.value = false
}

const openModal = () => {
  modalVisible.value = true
  console.log('模态框已打开')
}
</script>

Vue2 引用

<script src="./dist-vue2/vue-chat-button-global.iife.js"></script>
<link rel="stylesheet" href="./dist-vue2/vue-chat-button-global.css" />

全局 Loading 功能

组件支持全局请求 loading 功能，可以在所有 API 请求时显示全屏 loading 遮罩层。

配置选项

| 属性 | 类型 | 默认值 | 说明 | | -------------------- | --------- | ------ | ----------------------------- | | showGlobalLoading | boolean | true | 是否显示全局 loading | | globalLoadingText | string | '' | 全局 loading 文字 | | globalLoadingDelay | number | 100 | 全局 loading 延迟显示时间(ms) |

使用示例

<template>
  <!-- 基础用法 -->
  <chat-button-with-badge :params="params" token="your-token" showGlobalLoading />

  <!-- 自定义配置 -->
  <chat-button-with-badge :params="params" token="your-token" showGlobalLoading globalLoadingText="加载中..." globalLoadingDelay="300" theme-color="#ff4757" />
</template>

组件 API

ChatButtonWithBadge

带徽章的聊天按钮组件。点击组件默认弹窗弹窗，弹窗相关属性请看下面的 Modal 属性

Props

| 属性 | 类型 | 默认值 | 说明 | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ---------------------------------------------------------- | | badgeCount | number | 0 | 徽章数量 | | showBadge | boolean | true | 是否显示角标数量 | | badgeColor | string | '#ff4d4f' | 徽章颜色 | | iconColor | string | '#fff' | icon颜色 | | themeColor | string | '#1890ff' | 主题颜色 | | iconUrl | string | '' | 自定义图标URL | | isFixed | boolean | true | 是否固定定位 | | fixedPosition | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | 固定位置 | | fixedOffset | { x?: number; y?: number } | { x: 20, y: 60 } | 固定位置偏移 | | autoFetch | boolean | true | 是否自动获取徽章数量 | | fetchInterval | number | 30000 | 获取间隔（毫秒） | | enablePolling | boolean | true | 是否启用轮询 | | pollingInterval | number | 30000 | 轮询间隔（毫秒） | | environment | 'development' \|'test' \| 'production' \| 'uat' | 'development' | 环境配置 | | params | {"source_sys": "CLNT", //来源系统（必填，有效值：XUAN-选品网、CLNT-客户后台、OPER-新运营平台） "source_page": window.location.href,"custom_params": { // 【选填】 "uid": "WM202505221529531472", //客户uid "order_number": "BXY2507041337460", //订单编号 "after_sale_number": "AS202507041508577628" //售后单号} //第三方自定义参数 | undefined | 请求参数 （必传，不是订单的，可不传订单等信息） | | isOpenTab | boolean | false | 是否打开新标签页显示窗口 | | path | string | '/chat' | 打开新标签页需要跳转到对应页面时必传，默认跳转当前会话页面 | | token | string | '' | token, 必传 | | showIcon | boolean | true | 是否显示图标 |

Events

| 事件名 | 参数 | 说明 | | -------------- | --------------------------------------------- | ---------------- | | click | - | 按钮点击事件 | | badgeUpdate | count: number | 徽章数量更新事件 | | pollingStart | - | 轮询开始事件 | | pollingStop | - | 轮询停止事件 | | openModal | openModal(url: string, title: string) => {} | 打开弹窗 | | closeModal | | 关闭弹窗 | | error | | 异常 | | orderSent | | 发送订单结果 |

Methods

| 方法名 | 参数 | 返回值 | 说明 | | ----------------------- | ------------------ | --------------- | ---------------- | | fetchBadgeCount | - | Promise<void> | 手动获取徽章数量 | | setBadgeCount | count: number | void | 设置徽章数量 | | startPolling | - | void | 开始轮询 | | stopPolling | - | void | 停止轮询 | | updatePollingInterval | interval: number | void | 更新轮询间隔 |

ChatModal

聊天弹窗组件。

Props

| 属性 | 类型 | 默认值 | 说明 | | ------------------ | ------------------------------------- | --------- | ---------------------------------- | | visible | boolean | false | 是否显示弹窗 | | modalPosition | 'right' \| 'center' \| 'fullscreen' | 'right' | 弹窗位置 | | width | string | '400px' | 弹窗宽度 | | height | string | '600px' | 弹窗高度 | | closeOnOverlay | boolean | true | 点击遮罩是否关闭 | | closeOnEscape | boolean | true | 按ESC是否关闭 | | showFullscreen | boolean | false | 是否显示全屏按钮 | | enableAdjustSize | boolean | false | 是否可以调整窗口大小（窗口右下角） |

Events

| 事件名 | 参数 | 说明 | | ---------------- | ---------------------------------- | -------------- | | update:visible | value: boolean | 可见性更新事件 | | open | open(url: string, title: string) | 弹窗打开事件 | | close | - | 弹窗关闭事件 |

Methods

| 方法名 | 参数 | 返回值 | 说明 | | -------- | ---- | ------ | ------------ | | open | - | void | 打开弹窗 | | close | - | void | 关闭弹窗 | | toggle | - | void | 切换弹窗状态 |