摸鱼时整的活，舔狗模拟器

运行效果

设计思路

使用仿微信主题界面
舔狗初始会有几条信息存在于聊天内容区中
舔狗定时发送消息
给舔狗发送消息时，自动秒回

1.使用仿微信主题界面

设计图

代码实现-HTML:

<div class="lick-container" @keyup.enter="sendMessage">
    <div class="chat-content-container">
      <div class="header">
        舔狗
      </div>
      <div class="body" ref="msgBody">
        <div class="message" v-for="(message, index) in messageList" :key="index" :class="{self: message.type === 'self'}" >
          <div class="avatar"></div>
          <div class="trangle"></div>
          <div class="content">{{message.content}}</div>
        </div>
      </div>
    </div>
    <div class="type-container">
      <input class="type-input" v-model="keyWord">
      <div class="send-btn" @click="sendMessage">发送</div>
    </div>
  </div>

主要分为了两大块：类chat-content-container包括了头部和消息区域，类type-container是发送消息区域。消息区域body包含了多个消息，通过遍历消息数组自动生成。自己发送的消息和对方发送的消息通过数组元素的type来区分，自己的消息会加上类名self来实现需要的效果。

代码实现-CSS:

这里使用的是less预编译器

<style lang="less">
  .br-10px {
    border-radius: 10px;
  }
  .lick-container {
    width: 750px;
    height: 100%;
    margin: 0 auto;
  }
  .chat-content-container {
    .header {
      width: 100%;
      height: 79px;
      background: #EDEDED;
      border-bottom: 3px solid #E9E9E9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
    }
    .body {
      width: 100%;
      height: calc(100vh - 158px);
      overflow: auto;
      &::-webkit-scrollbar { width: 0 !important }
      background: #EDEDED;
      padding-top: 10px;
      .message {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        margin-left: 15px;
        &.self {
          flex-direction: row-reverse;
          margin-left: auto;
          margin-right: 15px;
          .trangle {
            border: none;
            border-top: 12.5px solid transparent;
            border-left: 12.5px solid rgb(149, 236, 105);
            border-bottom: 12.5px solid transparent;
            margin-left: 0;
            margin-right: 20px;
          }
          .content {
            background: rgb(149, 236, 105);
          }
          .avatar {
            background: url('../assets/avatar1.png');
            background-size: cover;
          }
        }
        .avatar {
          width: 75px;
          height: 75px;
          background: url('../assets/avatar2.png');
          background-size: cover;
          .br-10px();
        }
        .trangle {
          width:0;
          height:0;
          border-right: 12.5px solid #fff;
          border-bottom: 12.5px solid transparent;
          border-top: 12.5px solid transparent;
          margin-left: 20px;
        }
        .content {
          min-height: 75px;
          max-width: 505px;
          display: flex;
          align-items: center;
          font-size: 30px;
          padding: 20px 20px;
          background: #fff;
          .br-10px();
        }
      }
    }
  }
  .type-container {
    width: 100%;
    height: 79px;
    background: #EDEDED;
    border-top: 3px solid #E9E9E9;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .type-input {
      border: none;
      width: 75%;
      height: 59px;
      font-size: 30px;
      .br-10px();
      outline: none;
      text-indent: 30px;
    }
    .send-btn {
      // rgb(149, 236, 105)
      background: rgb(80, 236, 105);
      width: 15%;
      height: 59px;
      .br-10px();
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: #fff;
      cursor: pointer;
    }
  }
</style>

右边的消息主要是通过flex-direction设置为row-reverse来实现的，这里重点注意要将小三角形的方向换个位置。

代码实现-JS:

<script>
export default {
  data() {
    return {
      keyWord: '',
      messageList: [
        {type: 'oppsite', content: '宝，在不在哇！'},
        {type: 'oppsite', content: '今天我也好想你！'}
      ],
      simpWordList: [
        '今天你终于叫我名字了，虽然叫错了，但没关系我马上改', '宝，我现在不是舔狗了，我已经军训完了，你可以叫我军犬了',
        '问你在干嘛，你问我能不能别烦你，居然询问我的意见，态度真好，真喜欢你', '我坐在窗边给你发了99条消息，你终于肯回我了，你说发你妈啊，我一下子就哭了，原来努力真的有用，你已经开始考虑想见我的妈妈了，你也是挺喜欢我的',
        '今天扛水泥，工友夸我力气大，我瞬间就哭了，我扛得动任何东西，就是扛不住想你', '今天被厂长骂了，说我拌的水泥太稀了，可他不知道的是，我没有多拌水，只是拌水泥时很想你啊宝，眼泪就掉进了水泥里',
        '以后你走你的独木桥，我在下面撑着桥，你过桥的时候一定要小心，不要摔了，不然我会心疼的呜呜呜', '我们一起走在雪地里，我把我的外套给她披上，她转身就把外套给了他，那一刻我觉得她好善良',
        '你不是喜欢拉黑吗？我申请一百多个小号给你拉黑好吗？', '昨晚梦到你把我删了，赶紧起来看看，还好只是拉黑，原来你还是舍不得删掉我',
        '今天她没有理我，我反复斟酌，嗯，她一定是不想让我和她聊天，免得我打字太累。她真的太体贴太善解人意了。哭，对她的喜欢又多了一分'
      ]
    }
  },
  mounted() {
    setInterval(this.addReply, 5000)
  },
  methods: {
    addReply() {
      const { simpWordList } = this
      const length = simpWordList.length
      const index = Math.floor(Math.random() * length)
      this.messageList.push({type: 'oppsite', content: simpWordList[index]})
      this.$nextTick(() => {
        this.$refs.msgBody.scrollTop = this.$refs.msgBody.scrollHeight
      })
    },
    sendMessage() {
      if (this.keyWord === '') {
        return
      }
      this.messageList.push({type: 'self', content: this.keyWord})
      this.addReply()
      this.keyWord = ''
    }
  }
}
</script>

messageList初始就有两个值用于页面展示，同时页面渲染完成时会通过定时器每隔5s调用addReply()方法让舔狗自动发送消息,方法内部会自动让显示区域滚动到底部。sendMessage()方法会首先检测输入内容是否为空，如果内容为空则取消执行，不为空时将自己的信息添加进数组并调用addReply()方法催促舔狗秒回。

总结

这个项目的JS部分并不是很复杂，只是向消息数组总添加两种不同的消息，主要还是通过消息类型的判断去区分自己和对方消息样式，后续如果想要进一步增加功能，可以考虑加入关键字，当输入与关键字相关的内容，舔狗会去在相关关键字的回复数组中随机选择内容去回复，也可以增加舔狗昵称，头像的自定义功能。