Vue.js聊天窗开发

问题描述：Vue中聊天窗开发

思考：

我们先来模拟下过程，首先，点击输入框后，弹出小键盘，输入你想说的话，按前进键完成输出，新的聊天信息刷新到页面，小键盘关闭。

难点：新的聊天记录如何重新渲染到页面，也就是如何更新DOM元素？

根据官网说明：

因此只要数据改变-----this.data=newValue，DOM元素就会更新，即页面更新。

那么，我们把聊天记录存储到一个数组（chatArrays）中，当this.chatArrays中的记录+1，页面也就会产生一条新的聊天记录。

具体实现

1.声明数组chatArrays来保存聊天记录

data: function () {
    return {
      inputValue: ' ',
      chatArrays: [
        {
          name: '医生助理',
          message: '您好，请简单描述需要咨询的医生',
          actor: 'doctor'
        },
        {
          message: '咨询季节性感冒',
          actor: 'user'
        },
      ]
    };
  },

2. 使用v-modell绑定inputValue来监听用户输入的值，监听键盘enter事件向chatArrays中存值。

<input type="text" @keyup.enter="submit" v-model="inputValue" placeholder="这里输入文字。">

3.通过v-for来输出chatArrays中的信息

 <me-chat v-for="(object) in chatArrays" :name='object.name' :message='object.message'
               :actor='object.actor' :key='object.id'></me-chat>

4.submit方法如下：

submit: function (event) {
  // 1.把输入的值push到数组中。
  this.chatArrays.push({ message: this.inputValue, actor: 'user' });
  // 2.input中的值清空
  this.inputValue = '';
  // 3.关闭小键盘
  document.activeElement.blur();
  // 4.页面滚动到底部。
}