chat-vue v1.0.2-alpha.3

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 属性

4.1.1 messageList的元素

4.1.1.1 metaInfo的属性

4.1.2 config

4.1.2.1 config.pulldownConfig和config.pullupConfig

4.2 事件

其它示例

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.