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  />

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

    <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" />
    </div>

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

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

        <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 } 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({
  code: 'Client-123456789',
  type: 'order'
})


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