JwChat

介绍

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

示例1

示例2

安装

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

使用npm安装。

npm install jwchat

使用yarn安装。

yarn add jwchat

使用pnpm安装。

pnpm install jwchat

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

使用

在 main.js 中引入组件

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

app.use(JwChat);

在 *.vue 中使用

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

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

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

将lib代码放在/src/assets文件夹中
在 main.ts 中引入组件

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

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

在 *.vue 中使用

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

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

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

四铢半两/JwChat

JwChat

介绍

安装

使用

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

文档

参与贡献

推荐项目

交流学习

简介

发行版

贡献者

近期动态

四铢半两/JwChat .gitee-modal { width: 500px !important; }

JwChat

介绍

安装

使用

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

文档

参与贡献

推荐项目

交流学习

简介

发行版

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

四铢半两/JwChat