vue实现机器人聊天

 很多小伙伴在学习vue的时候，会遇到很多问题，所以，我用vue2写了一个类似于客服聊天的机器人自动聊天，以下是全部代码，文中的提示音频和图片在我的博客里面找

  <style>

    body {

      margin: 0 auto;

    }

    .chat {

      position: fixed;

      top: 0;

      left: 0;

      bottom: 0;

      right: 0;

      background-color: #f5f5f5;

    }

    input {

      border: none;

      outline: none;

      background-color: transparent;

      padding: 0;

      display: block;

      width: 100%;

      height: 100%;

      color: #444;

    }

    .ipt {

      height: 30px;

      flex: 1;

      background-color: #f5f5f5;

      padding: 0 5px;

      margin-right: 10px;

    }

    .chat-send {

      position: absolute;

      right: 0;

      left: 0;

      bottom: 0;

      height: 50px;

      background-color: #fff;

      padding: 0 10px;

      display: flex;

      align-items: center;

 

    }

    .send-btn {

      width: 60px;

      text-align: center;

      border-radius: 5px;

      height: 30px;

      line-height: 30px;

      background-color: rgb(33, 184, 19);

      color: #fff;

      font-size: 14px;

    }

    .chat-content {

      margin-bottom: 40px;

    }

    .chat-content::after {

      display: block;

      content: "