jwchat v2.0.3

JwChat

介绍

一款基于 Vue 和 ElementPlus 的极简的聊天框组件 本项目是一款极简的数据驱动为主的聊天框组件。 新增表情包可自动匹配微信表情。 新增聊天窗口配置组件，可以自由配置 顶部状态栏 和 右侧信息栏

安装

建议您使用包管理器（如 NPM、Yarn 或 pnpm）安装 JwChat，

使用npm安装。

npm install jwchat

使用yarn安装。

yarn add jwchat

使用pnpm安装。

pnpm install jwchat

如果您的网络环境不好，建议使用相关镜像服务 cnpm 或 中国 NPM 镜像。

使用

1. 在 main.js 中引入组件

import JwChat from "jwchat";
import "jwchat/style.css";

app.use(JwChat);

2. 在 *.vue 中使用

<JwChat
  :taleList="list"
  @enter="bindEnter"
  v-model="inputMsg"
  :showRightBox="true"
  scrollType="noscroll"
/>

以文件的形式在本地直接引入

请不要放在public 文件夹中。import public 文件夹中的文件中的 js，在打包时不参与编译会报错

1. 将lib代码放在/src/assets文件夹中

2. 在 main.ts 中引入组件

import JwChat from "./assets/lib/JwChat.es.js";
import "./assets/lib/style.css";

createApp(App).use(JwChat).mount("#app");

3. 在 *.vue 中使用

<JwChat
  :taleList="list"
  @enter="bindEnter"
  v-model="inputMsg"
  :showRightBox="true"
  scrollType="noscroll"
/>

4. 如果项目使用的是typescript 需要在src目录下*.d.ts中声明类型。

// env.d.ts 或者 vite-env.d.ts
declare module "*/JwChat.es.js";

文档

• vue3 文档(2.*.*)
• vue2 文档(1.*.*)

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

推荐项目

• AVue
• JPower

交流学习

• QQ 群 ： 235689934 (已满)
• QQ 群 ： 791302027