vue机器人聊天_vue-bot-ui

vue机器人聊天

各位话不多说! 先上效果图：如下

官网地址： https://www.npmjs.com/package/vue-bot-ui

第一步先安装：npm install vue-bot-ui

然后导入组件：import { VueBotUI } from 'vue-bot-ui'

​ components:{ VueBotUI}

就可以使用了哦！

 <VueBotUI
        :messages = "messageData" //       是机器人 发送的消息可以进行自定义
        :options = "botOptions"  //       data 中定义自己需要的 可以查看官网 这个是定义机器人头像等
        :bot-typing="botTyping"  //       如果true，机器人输入指示器将显示
        :input-disable="inputDisable" //    如果true, 消息输入将被禁用
        :is-open="false"           //   如果true, 板子将从 init 打开
        @msg-send = "messageSendHandler" //  自己点击发送消息
        @init="botStart"           //  初始化机器人发送消息
    />
1
2
3
4
5
6
7
8
9

怎么进行呢 列子如下：

import  { VueBotUI } from 'vue-bot-ui'
import { messageService } from './helpers/message' //需要你新建js文件 
export default {
  name: "Contactus",
  components:{
    VueBotUI
  },
  data() {
    return {
      botTyping:true,
      messageData: [],
      inputDisable:false,
      botOptions : {
        botTitle: '小康客服', //显示是什么
        botAvatarImg:'机器人头像 你可以自定义',
        botAvatarSize:'32', //这个是头像的大小
        animation:true
        // 请参阅下面的选项列表
      },
    };
  },
  methods: {
    botStart () {   //初始化 会发送什么
      this.botTyping = true
      setTimeout(() => {
        this.botTyping = false
        this.messageData.push({
          agent : 'bot' ,
          type : 'button' ,
          text : '欢迎您！使用小康智能客服,请问有什么需要吗？？' ,
        })
      }, 1000)
    },
    messageSendHandler(value){  //点击发送传一个值 
      this.messageData.push({
        agent: 'user',
        type: 'text',
        text: value.text
      })
      this.getResponse()   //调用下面机器人自定义的消息
      console.log("点击发送了")
    },
    getResponse () {
      this.botTyping = true
      messageService.createMessage()
          .then((response) => {
            const replyMessage = {
              agent: 'bot',
              ...response
            }

            this.inputDisable = response.disableInput
            this.messageData.push(replyMessage)

            // finish
            this.botTyping = false
          })
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import { messageService } from './helpers/message' 文件如下：

import { fakeMessages } from './fake-messages' //这个也是一个js 是机器的自定义一些回答消息的需要新建文件

export const messageService = {
    createMessage
}

function createMessage () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let randomNumber = Math.floor(Math.random() * fakeMessages.length)
            resolve(fakeMessages[randomNumber])
        }, 1000)
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

import { fakeMessages } from './fake-messages' 文件如下：

export const fakeMessages = [
    {
        'type': 'text',
        'text': '您说啥小康不会',
        'disableInput': false
    },
    {
        'type': 'button',
        'text': '您是否要访问或链接我们?',
        'options': [
            {
                'text': '打开博客',
                'value': 'search',
                'action': 'postback'
            },
            {
                'text': '联系人工客服',
                'value': 'submit_ticket',
                'action': 'postback'
            },
        ],
        'disableInput': true
    },
    {
        'type': 'text',
        'text': 'Please type your problem',
        'disableInput': false
    },
    {
        'type': 'button',
        'text': 'Here are the results from our knowledgebase.',
        'options': [
            {
                'text': '联系小杰',
                'value': 'https://google.com',
                'action': 'url'
            },
            {
                'text': '联系官方',
                'value': 'https://google.com',
                'action': 'url'
            },
            {
                'text': "取消",
                'value': 'result_not_match',
                'action': 'postback'
            }
        ],
        'disableInput': true
    },
    {
        'type': 'text',
        'text': 'Sorry to hear that. Please type your problem and we will create a ticket for you.',
        'disableInput': false
    },
    {
        'type': 'button',
        'text': 'All done! Your support ticket is created.',
        'options': [
            {
                'text': 'View ticket',
                'value': 'https://google.com',
                'action': 'url'
            }
        ],
        'disableInput': false
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

如果还有不懂的可以翻阅官网文档！一些参数什么的

是不是超级简单啊！小伙伴们 这东西挺好玩哦 来试试哦~