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 遮罩层。

配置选项

使用示例

<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

Events

Methods

ChatModal

聊天弹窗组件。

Props

Events

Methods