chat-vue

一、使用指南

1.install(安装)

yarn add chat-vue / npm i chat-vue

2.import(引入)

在vue项目中main.js写入

import 'chat-vue/dist/chat.css';

3.use(使用)

在使用chat-vue的组件中写入

<template>
  // ...
  <chat :messageList="messageList" @onMessagePost="postHandler" >
    <template v-slot:slotName="{message}">
      <div>{{message.id}}</div>
    </template>
  </chat>
  // ...
</template>

// ...
import chat from "chat-vue";
export default {
  components: {
    chat
  },
  data() {
    return {
      messageList: [{
        id: 0,
        content: "您好！欢迎使用chat-vue"
      }, {
        id: 1,
        type: 'html',
        content: '<div>...</div>
      }, {
        id: 2,
        type: 'guess',
        content: '...',
        replyList: [{
          title: '...',
          value: '...'
        }]
      }, {
        id: 3,
        type: 'replyList',
        replyList: [{
          title: '...',
          value: '...'
        }]
      }, {
        id: 4,
        type: 'img',
        src: '...'
      }, {
        id: 5,
        type: 'video',
        src: '...'
      }, {
        id: 6,
        type: 'link',
        title: '...',
        desc: '...',
        url: '...'
      }, {
        id: 7,
        slot: 'slotName'
      }]
    }
  },
  methods: {
    postHandler(userInput) {
      this.messageList.push({
        id: Math.random(),
        role: 'user',
        content: userInput
      })
      setTimeout(() => {
        this.messageList.push({
          id: Math.random(),
          content: `为您找到问题'${userInput}'的解决方案是...` 
        })
      }, 1000);
    }
  }
}

4. 属性和事件补充说明

4.1 属性

属性名	说明	类型	默认值
messageList	消息数据（详情参考4.1.1）	Array	[]
tagList	推荐标签([{value: '标签1', ...])	Array	[]
relationList	输入联想问题列表	Array	[]
config	配置集合（详情参考4.1.3）	Object	{theme: "modern", placeholder: '请输入'}

4.1.1 messageList的元素

属性名	说明	类型	默认值
id	唯一标识	Number、String
text	文本内容	String
html	带有html的富文本内容	String
type	消息类型（可选值：text, html, replyList, guess, img, video, link）	String	text
role	消息所属角色（user(用户, 右侧展示), service(客服，左侧展示)）｜String	String
replyList	推荐问题列表[{value: '问题1', ...}, ...]	Array
feedback	赞、踩选中记录	Number
noFeedback	是否展示‘赞、踩’	Boolean
metaInfo	消息元数据(详情参考4.1.1.1)	Object
src	当type为'img'时才生效，图片地址	String
src	当type为'video'时才生效，视频地址	String
title	当type为'link'时才生效，链接标题	String
desc	当type为'link'时才生效，链接描述	String
url	当type为'link'时才生效，链接跳转地址	String
slot	当写入slot属性时，该条消息渲染模版会匹配插槽中的内容	String

4.1.1.1 metaInfo的属性

属性名	说明	类型	默认值
nickname	昵称	String
time	时间	String

4.1.2 config

属性名	说明	类型	默认值
theme	主题；可选值：modern、basic	String	modern
serviceIcon	客服头像（为真值时展示客服头像）	String
userIcon	用户头像（为真值时展示用户头像）	String
placeholder	输入框占位内容	String	请输入
noScroll	是否禁止滚动区自动滚动	Boolean
pulldownConfig	下拉加载配置（详情参考4.1.2.1）	Object
pullupConfig	上拉加载配置（详情参考4.1.2.1）	Object
showFeedback	是否需要“赞、踩功能”	Boolean

4.1.2.1 config.pulldownConfig和config.pullupConfig

属性名	说明	类型	默认值
disabled	是否禁用功能	Boolean	true
loadingIcon	加载图标	String
pullText	拉动时的文字	String
loadingText	加载时的文字	String
noMoreText	没有更多时的文字	String
noMoreData	是否没有更多了	Boolean
boundaryDistance	触发加载的边界距离	Number
callback	加载时需要处理的回调函数（该函数需返回Promise）	Function: Promise

4.2 事件

事件名	说明	参数
onMessagePost	用户点击发送按钮或按下回车键后触发	用户输入的文本
quickReply	用户点击推荐问题列表中的问题后触发	参数为推荐问题数组(replyList)中对应点击的元素
quickTag	用户点击推荐标签列表中的标签后触发	参数为推荐标签数组(tagList)中对应点击的元素
feedback	用户点击消息下方的‘赞、踩’按钮	参数1，2分别为消息id和反馈类型（0: 赞、1：踩）
onInputChanged	输入框change触发，获取到输入框的value	参数为输入框的value
onAssociationProblemSelect	点击输入联想问题调用此函数，返回该问题对应的对象	参数为联想问题数组(relationList)中对应点击的元素

其它示例

1 下拉加载（1. 将config传给chat组件；2. 在config中写入pulldownConfig对象；3. 在pulldownConfig配置callback函数）

<template>
  // ...
  <chat :messageList="messageList" :config="config" @onMessagePost="postHandler" />
  // ...
</template>

// ...
import chat from "chat-vue";
export default {
  components: {
    chat
  },
  data() {
    return {
      messageList: [{
        id: 0,
        content: "您好！欢迎使用chat-vue"
      }],
      config: {
        // 下拉加载的配置
        pulldownConfig: {
          callback: this.pulldownHandler
        }
      }
    }
  },
  methods: {
    postHandler(userInput) {
      this.messageList.push({
        role: 'user',
        content: userInput
      })
      setTimeout(() => {
        this.messageList.push({
          content: `为您找到问题'${userInput}'的解决方案是...` 
        })
      }, 1000);
    },
    // 下拉加载的回调函数
    pulldownHandler() {
      return new Promise(reslove => {
        setTimeout(() => {
          this.messageList.unshift({
            content: '下拉消息'
          })
          reslove()
        }, 1000);
      })
    }
  }
}
// ...

二、开发指南

规范

1. 组件样式统一写入/src/less文件夹中的less文件，每个组件根元素声明一个类名来形成一个命名空间，统一使用cv-作为类名前缀
2. 每个主题的样式对应/src/less/theme中的一个文件夹，由一个index.less引入该文件夹下所有子文件夹的index.less。应该最多包含这3个文件夹default、mobile、pc。每个子文件夹中的index.less引入该文件夹下的所有less文件

Project setup(运行、开发本项目)

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.