Vue - 聊天框功能（JwChat）

已于 2022-06-30 14:08:54 修改
阅读量1w 收藏 67
点赞数 8
分类专栏： # Vue__插件、依赖的使用 文章标签： vue.js
于 2021-09-07 11:38:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Jie_1997/article/details/120154717
版权

使用 JwChat 实现聊天框功能

JwChat 地址： https://codegi.gitee.io/jwchatdoc/

一. 效果图

在这里插入图片描述

二. 功能实现

  1. 安装依赖
    npm i jwchat -S

  2. main.js 引入配置

    //element 必须引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//聊天室-基于element
import Chat from 'jwchat';
Vue.use(Chat)

  3. 组件中使用

    <template>
  <div class="jwchat">
    <!-- 
      v-model	输入框中的文字	String	-	""
      taleList	会话内容	Array	-	[]
      toolConfig	工具栏配置	Object	-	{}
      width	JwChat界面框宽度	string	-	750px
      height	JwChat界面框高度	string	-	570px
      config	组件配置	Object	-	{}
      scrollType	消息自动到低	String	scroll	noroll
      showRightBox	显示右边内容	Boolean	false	true
      winBarConfig	多窗口配置
      quickList   自动匹配快捷回复
      @enter	输入框点击就发送或者回车触发的事件	输入的原始数据
      @clickTalk	点击聊天框列中的用户和昵称触发事件	当前对话数据
     -->
    <JwChat-index
      v-model="inputMsg"
      :taleList="taleList"
      :config="config"
      :showRightBox="true"
      scrollType="scroll"
      :winBarConfig="winBarConfig"
      :quickList="config.quickList"
      @enter="bindEnter"
      @clickTalk="talkEvent"
    >
      <!-- 窗口右边栏 -->
      <JwChat-rightbox :config="rightConfig" @click="rightClick" />
      <!-- 快捷回复 -->
      <!-- <JwChat-talk :Talelist="talk" :config="quickConfig" @event="bindTalk" /> -->
      <!-- 工具栏自定义插槽 -->
      <template slot="tools">
        <div style="width: 20rem; text-align: right" @click="toolEvent(12)">
          <JwChat-icon type="icon-lishi" title="自定义" />
        </div>
      </template>
    </JwChat-index>
  </div>
</template>
 
<script>
const img = "https://www.baidu.com/img/flexible/logo/pc/result.png";
const listData = [
  {
    date: "2020/04/25 21:19:07",
    text: {
      text: "<i class='el-icon-document-checked' style='font-size:2rem;'/>",
      subLink: {
        text: "a.txt",
        prop: {
          underline: false,
        },
      },
    },
    mine: false,
    name: "留恋人间不羡仙",
    img: "https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg",
  },
  {
    date: "",
    text: { text: "起床不" },
    mine: false,
    name: "留恋人间不羡仙",
    img: "https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg",
  },
  {
    text: "2020/04/25 21:19:07",
    type: "tip",
  },
  {
    date: "2020/04/25 21:19:07",
    text: {
      text: "<audio data-src='https://www.w3school.com.cn/i/horse.mp3'/>",
    },
    mine: false,
    name: "只盼流星不盼雨",
    img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
  },
  {
    date: "2020/04/25 21:19:07",
    text: { text: "<img data-src='" + img + "'/>" },
    mine: false,
    name: "只盼流星不盼雨",
    img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
  },
  {
    date: "2020/04/16 21:19:07",
    text: {
      text: "<video data-src='https://www.w3school.com.cn/i/movie.mp4' controls='controls' />",
    },
    mine: true,
    name: "JwChat",
    img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
  },
  {
    date: "2021/03/02 13:14:21",
    mine: false,
    name: "留恋人间不羡仙",
    img: "https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg",
    text: {
      system: {
        title: "在接入人工前，智能助手将为您首次应答。",
        subtitle: "猜您想问:",
        content: [
          {
            id: `system1`,
            text: "组件如何使用",
          },
          {
            id: `system2`,
            text: "组件参数在哪里查看",
          },
          {
            id: "system",
            text: "我可不可把组件用在商业",
          },
        ],
      },
    },
  },
];
function getListArr(size) {
  const listSize = listData.length;
  if (!size) {
    size = listSize;
  }
  let result = [];
  for (let i = 0; i < size; i++) {
    const item = listData[(Math.random() * listSize) >> 0];
    item.id = Math.random().toString(16).substr(-6);
    result.push(item);
  }
  return result;
}
export default {
  components: {},
  data() {
    return {
      // 输入框中的文字
      inputMsg: "",
      // 会话内容
      taleList: [],
      // 工具栏配置
      tool: {
        // show: ['file', 'history', 'img', ['文件1', '', '美图']],
        // showEmoji: false,
        callback: this.toolEvent,
      },
      // 组件配置
      config: {
        img: "https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg",
        name: "JwChat",
        dept: "最简单、最便捷",
        callback: this.bindCover,
        historyConfig: {
          show: true,
          tip: "滚动到顶时候显示的提示",
          callback: this.bindLoadHistory,
        },
        // 自动匹配快捷回复
        quickList: [
          { text: "这里是jwchat，您想了解什么问题。", id: 3 },
          { text: "jwchat是最好的聊天组件", id: 4 },
          { text: "谁将烟焚散，散了纵横的牵绊；听弦断，断那三千痴缠。", id: 5 },
          { text: "长夏逝去。山野间的初秋悄然涉足。", id: 6 },
          { text: "江南风骨，天水成碧，天教心愿与身违。", id: 7 },
          { text: "总在不经意的年生。回首彼岸。纵然发现光景绵长。", id: 8 },
          { text: "外面的烟花奋力的燃着，屋里的人激情的说着情话", id: 10 },
          { text: "假如你是云，我就是雨，一生相伴，风风雨雨；", id: 11 },
          {
            text: "即使泪水在眼中打转，我依旧可以笑的很美，这是你学不来的坚强。",
            id: 12,
          },
          {
            text: " 因为不知来生来世会不会遇到你，所以今生今世我会加倍爱你。",
            id: 13,
          },
        ],
      },
      // 多窗口配置
      winBarConfig: {
        active: "win01", // 当前选中
        width: "160px", // 宽度大小
        listHeight: "60px", // 单个高度
        // 用户列表
        list: [
          {
            id: "win00",
            img: "https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg",
            name: "JwChat",
            dept: "最简单、最便捷",
            readNum: 1,
          },
          {
            id: "win01",
            img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
            name: "阳光明媚爱万物",
            dept: "沙拉黑油",
            readNum: 12,
          },
          {
            id: "win02",
            img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
            name: "只盼流星不盼雨",
            dept: "最后说的话",
            readNum: 12,
          },
          {
            id: "win03",
            img: "https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg",
            name: "留恋人间不羡仙",
            dept: "这里可以放万物",
            readNum: 0,
          },
          {
            id: "win04",
            img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
            name: "阳光明媚爱万物",
            dept: "官方客服",
          },
        ],
        callback: this.bindWinBar,
      },
      // 窗口右边栏配置
      rightConfig: {
        tip: "群公告",
        notice:
          "【公告】这是一款高度自由的聊天组件，基于AVue、Vue、Element-ui开发。",
        listTip: "当前在线",
        list: [
          {
            name: "JwChat",
            img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
            id: 1,
          },
          {
            id: 2,
            name: "JwChat",
            img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
          },
          {
            id: 3,
            name: "JwChat",
            img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
          },
          {
            id: 4,
            name: "留恋人间不羡仙",
            img: "https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg",
          },
          {
            name: "只盼流星不盼雨",
            img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
          },
        ],
      },
      // 快捷回复配置
      talk: [
        "快捷回复1",
        "快捷回复2",
        "快捷回复3",
        "快捷回复4",
        "快捷回复5",
        "快捷回复6",
      ],
      quickConfig: {
        nav: ["快捷回复", "超级回复"],
        showAdd: true,
        maxlength: 200,
        showHeader: true,
        showDeleteBtn: true,
      },
      rightConfig2: {
        listTip: "当前在线",
        // notice: '【公告】这是一款高度自由的聊天组件，基于AVue、Vue、Element-ui开发。点个赞再走吧 ',
        list: [
          {
            name: "JwChat",
            img: "https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg",
          },
          {
            name: "留恋人间不羡仙",
            img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
          },
          {
            name: "只盼流星不盼雨",
            img: "https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg",
          },
        ],
      },
    };
  },
  methods: {
    // 切换用户窗口，加载对应的历史记录
    bindWinBar(play = {}) {
      const { type, data = {} } = play;
      console.log(play);
      if (type === "winBar") {
        const { id, dept, name, img } = data;
        this.config = { ...this.config, id, dept, name, img };
        this.winBarConfig.active = id;
        if (id === "win00") {
          this.taleList = getListArr();
        } else this.taleList = getListArr((Math.random() * 4) >> 0);
      }
      if (type === "winBtn") {
        const { target: { id } = {} } = data;
        const { list } = this.winBarConfig;
        this.winBarConfig.list = list.reduce((p, i) => {
          if (id != i.id) p.push(i);
          return p;
        }, []);
      }
    },
    // 点击聊天框列中的用户和昵称触发事件
    talkEvent(play) {
      console.log(play);
    },
    // 输入框点击就发送或者回车触发的事件
    bindEnter(e) {
      console.log(e);
      const msg = this.inputMsg;
      if (!msg) return;
      const msgObj = {
        date: "2020/05/20 23:19:07",
        text: { text: msg },
        mine: true,
        name: "JwChat",
        img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
      };
      this.taleList.push(msgObj);
    },
    // 快捷回复，组件点击选中事件
    bindTalk(play) {
      console.log("talk", play);
      const { key, value } = play;
      if (key === "navIndex" && value == "1") {
        this.talk = ["回复1", "回复2", "回复3"];
      }
      if (key === "navIndex" && value == "2") {
        this.talk = ["超级回复1", "超级回复2", "超级回复3"];
      }
      if (key === "select") {
        this.inputMsg = value;
        // this.bindEnter();
      }
      if (key === "delIndex") {
        this.talk.splice(value, 1);
      }
    },
    /**
     * @description: 点击加载更多的回调函数
     * @param {*}
     * @return {*}
     */
    bindLoadHistory() {
      const history = new Array(3).fill().map((i, j) => {
        return {
          date: "2020/05/20 23:19:07",
          text: { text: j + new Date() },
          mine: false,
          name: "JwChat",
          img: "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
        };
      });
      let list = history.concat(this.list);
      this.taleList = list;
      console.log("加载历史", list, history);
    },
    /**
     * @description:
     * @param {*} type 当前点击的按钮
     * @param {*} plyload 附加文件或者需要处理的数据
     * @return {*}
     */
    toolEvent(type, plyload) {
      console.log("tools", type, plyload);
    },
    bindCover(event) {
      console.log("header", event);
    },
    rightClick(type) {
      console.log("rigth", type);
    },
  },
  mounted() {
    this.taleList = getListArr();
  },
};
</script>

<style>
.jwchat {
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
JwChat：一款基于Vue和ElementUI的极简聊天框组件
ZicoChan的博客
05-13 4365
项目名称：JwChat 项目作者：四铢半两 开源许可协议：MIT 项目简介 一款基于 Vue 和 ElementUI 的极简聊天框组件。本项目是一款极简的数据驱动为主的聊天框组件，新增表情包可自动匹配微信表情， 新增聊天窗口配置组件，可以自由配置 顶部状态栏 和 右侧信息栏。JwChat 的代码借鉴于AVue。 效率 简化流程：设计简洁直观的操作流程； 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策； 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用...
vue3实现ai聊天对话框
everfoot的博客
12-15 6483
input输入message对话框settings设置面板w-full答：虽然设置存储在了 localStorage 中，但是在页面刷新后没有正确地初始化深色模式的样式。我们需要在应用启动时立即应用存储的主题设置。解决办法：给 App.vue 加上挂载时就进行一次设置。传输数据以下是和。
JwChat：一款基于Vue的极简聊天框组件
Riqk_Qin的专栏
04-06 5266
简洁至上 以最少的代码实现最想要的功能。 效率 Efficiency 简化流程：设计简洁直观的操作流程； 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策； 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。 #可控 Controllability 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策； 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。 快速安装 # 使用yarn安装。 yarn add jw...
实现一个实时聊天应用：用 Vue 3 和 WebSocket 构建多人在线聊天系统
最新发布
idree的博客
04-01 1365
实现一个实时聊天应用：用 Vue 3 和 WebSocket 构建多人在线聊天系统
vue:聊天对话框的实现
热门推荐
m0_49623851的博客
10-12 1万+
vue:聊天对话框的实现，保持滚动条在位于底部的最新消息。长单词换行，以及数字，英文，符号不会换行，还有浏览器默认压缩空格的问题。处理聊天信息里的链接
VUE2实现聊天室输入框
Life_Effort的博客
09-13 2399
1-该段代码是输入框的编辑部分，@input="onInput"实时获取输入框内的数据，@paste="handlePaste"当用户粘帖内容到输入框的时候会被触发，@dragover.prevent可以控制拖拽操作行为，当用户在textarea上放下拖拽的内容时会调用@drop="handleDrop"方法。2-该段代码是输入框展示文件和图片的预览模态框，showPreviewModal的值（true或者false）控制预览模态框的显示和隐藏。3-拖拽图片和文件的方式，上传文件和图片。
vue对话框组件
08-10
vue 对话框组件
Vue移动端基础组件对话框
08-12
Vue移动端基础组件 - 对话框
JwChat极简聊天框组件 v1.1.1.zip
03-25
总体来说，JwChat极简聊天框组件提供了便捷的实时聊天功能，适用于多种应用场景，并且通过开源的源代码，鼓励开发者进行创新和定制。对于学习Web开发的个人或希望提升网站功能的企业来说，这是一个非常有价值的资源...
一款基于Vue和ElementUI极简的聊天框组件 本项目是一款极简的数据驱动为主的聊天框组件
08-14
本文将深入探讨基于Vue和ElementUI构建的极简聊天框组件，以及如何利用这些技术来实现聊天功能。 首先，Vue.js的核心在于其数据绑定和组件化特性。在聊天框组件中，数据驱动的概念意味着所有的视图更新都源于数据的...
【JwChat极简聊天框组件 v0.2.48】基于Vue和ElementUI极简的聊天框组件+表情包功能+可自动匹配微信表情
08-14
JwChat极简聊天框组件是一款基于Vue和ElementUI极简的聊天框组件。 软件包含了表情包功能，可自动匹配微信表情。还包含了聊天窗口配置组件，可以自由配置顶部状态栏和右侧信息栏。 JwChat安装： 使用 npm 安装 npm ...
一个简单而强大的对话框基于Vue2x的对话框类型
08-08
一个简单而强大的对话框，基于Vue2.x的对话框类型，包括Modal，Alert，Mask和Toast
前端聊天 jwChat 源码
10-15
2. **前端框架**：根据项目名称`chat-master`，可以推测jwChat可能使用了某种前端框架，如React、Vue或Angular。这些框架能帮助开发者更高效地组织代码，实现组件化开发，并提供状态管理机制，这对于构建复杂交互的...
vue聊天功能模块
waillyer的博客
08-26 9388
需求：聊天模块，可以实现发送文字、表情、图片、文件 布局 分为三部分 左侧会话列表 中部聊天列表 右侧群组成员列表 先来看看效果 布局：左边固定大小，中间宽75%，可右展开 聊天布局：左消息，撤回消息，右消息，用text-align控制 布局 <!--聊天界面--> <div class="messagesBox-BigRight-down80"> &
Vue3对话框（Dialog）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
04-04 7679
弹出的对话框组件，可用于弹窗展示内容，或者提交内容，支持：自定义宽高；自定义样式；自定义按钮；隐藏底部按钮；切换全屏；自定义位置；动画出现位置；异步延迟关闭；总之，功能丰富，简单易用😁😁
vue项目中创建一个聊天窗口
weixin_47786335的博客
07-18 7264
在上面的代码中，我们创建了一个简单的聊天窗口组件，其中包含一个用于显示聊天消息的容器和一个用于输入消息的表单。当用户输入消息并点击发送按钮时，会将消息添加到messages数组中，并通过v-for指令循环显示所有消息。通过以上步骤，你已经创建了一个简单的聊天窗口组件，并在父组件中使用它。你可以根据需要自定义样式和其他功能，例如添加时间戳、聊天头像等。
vue实现聊天框，模拟对话附上html
m0_47415644的博客
09-02 4567
vue实现聊天框，模拟对话 demo。
(一)vue聊天功能界面
LovelyLittleCub的博客
08-27 1651
【代码】(一)vue聊天功能界面。
【vue】仿PC端微信制作聊天框
一位前行者的博客
06-17 1万+
采用(vue+vue-router+vuex+es6+stylus) 来实现一个仿PC端微信的小demo，可以使用一个智能api，实现智能对话。欢迎大家对鄙人提出宝贵意见，相互学习讨论，一起进步。demo地址 源码地址实现页面的核心组件分别是搜索框，左侧聊天列表，消息对话框，还有输入框虽说在这里使用vuex有点大材小用，但是面对各组件之间状态传递，多层嵌套的组件传参，毅然决然决定使用vuex进行数据管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。 聊天消息列表在
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值