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> 

组件 API

ChatButtonWithBadge

带徽章的聊天按钮组件。

Props

Events

Methods

ChatModal

聊天弹窗组件。

Props

Events

Methods