Package Exports

vue-chat-button-simple
vue-chat-button-simple/dist/index.js
vue-chat-button-simple/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-chat-button-simple) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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