xiaoao-chat-website

A Vue 3 chat component library with popup chat functionality.

Installation

npm install xiaoao-chat-website
# or
yarn add xiaoao-chat-website
# or
pnpm add xiaoao-chat-website

Usage

Component List

• FloatBall - Floating chat button

Using with Composition API

<template>
  <div>
    <!-- 
      new-chat：是否显示新对话按钮  默认:true
      contact-us：是否显示联系我们按钮  默认:true
      is-download：是否显示下载导出  默认:false
     -->
    <FloatBall ref="FloatBallRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

import { FloatBall } from 'xiaoao-chat-website'
import 'xiaoao-chat-website/style.css'

const FloatBallRef = ref()

const open = () => {
  FloatBallRef.value.open()
}

const close = () => {
  FloatBallRef.value.close()
}
</script>

Dependencies

This library depends on:

• Vue 3 (^3.5.29)
• Element Plus (^2.13.3)
• Other dependencies are included in the package

Development

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Build for Production (as library)

pnpm build

This will generate the following files in the dist directory:

• xiaoao-chat-website.js - ES module bundle
• xiaoao-chat-website.umd.cjs - UMD bundle
• style.css - Compiled styles

License

MIT