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.