Vue Chat Button

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

安装

npm install vue-chat-button
# 或
yarn add vue-chat-button
# 或
pnpm add vue-chat-button

使用方法

全局注册

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>
    <!-- 简单聊天按钮 -->
    <ChatButtonSimple :theme-color="#1890ff" @click="handleClick" />

    <!-- 带徽章的聊天按钮 默认固定在屏幕右下角 -->
    <ChatButtonWithBadge @click="handleClick" />
  </div>
</template>

<script setup>
import { ChatButtonSimple, ChatButtonWithBadge } from 'vue-chat-button'
import 'vue-chat-button/dist/vue-chat-button.css'

const handleClick = () => {
  console.log('聊天按钮被点击')
}
</script>

组件 API

ChatButtonSimple

简单聊天按钮组件。

Props

| 属性 | 类型 | 默认值 | 说明 | | ------------- | ------------------------------- | --------------- | ------------- | | iconUrl | string | '' | 自定义图标URL | | themeColor | string | '#1890ff' | 主题颜色 | | environment | 'development' \| 'production' | 'development' | 环境配置 |

Events

| 事件名 | 参数 | 说明 | | ------- | ---- | ------------ | | click | - | 按钮点击事件 |

ChatButtonWithBadge

带徽章的聊天按钮组件。

Props

| 属性 | 类型 | 默认值 | 说明 | | ----------------- | -------------------------------------------------------------- | ------------------ | -------------------- | | badgeCount | number | 0 | 徽章数量 | | badgeColor | string | '#ff4d4f' | 徽章颜色 | | themeColor | string | '#1890ff' | 主题颜色 | | iconUrl | string | '' | 自定义图标URL | | isFixed | boolean | false | 是否固定定位 | | 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' \| 'production' | 'development' | 环境配置 | | params | any | undefined | 请求参数 |

Events

| 事件名 | 参数 | 说明 | | -------------- | --------------- | ---------------- | | click | - | 按钮点击事件 | | badgeUpdate | count: number | 徽章数量更新事件 | | pollingStart | - | 轮询开始事件 | | pollingStop | - | 轮询停止事件 | | error | error: any | 错误事件 |

Methods

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

ChatModal

聊天弹窗组件。

Props

| 属性 | 类型 | 默认值 | 说明 | | ---------------- | ------------------------------------- | ------------ | ---------------- | | visible | boolean | false | 是否显示弹窗 | | iframeUrl | string | '' | iframe URL | | modalTitle | string | '在线客服' | iframe 标题 | | position | 'right' \| 'center' \| 'fullscreen' | 'right' | 弹窗位置 | | width | string | '400px' | 弹窗宽度 | | height | string | '600px' | 弹窗高度 | | closeOnOverlay | boolean | true | 点击遮罩是否关闭 | | closeOnEscape | boolean | true | 按ESC是否关闭 |

Events

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

Methods

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

环境配置

组件支持环境配置，可以自动切换API地址等配置：

import { getEnvironmentConfig } from 'vue-chat-button'

const config = getEnvironmentConfig('production')
console.log(config.apiBaseUrl)

许可证

MIT