简单的聊天布局，聊天历史自下而上

Question

我想创建一个非常简单的网络聊天布局，但无法获得聊天历史从下到上增长。我想坚持使用预定义的争夺战组件和命令，并且只在真正需要的情况下使用定制的css修改。

布局应该如下所示：

​

​

• 3个主列，中间显示聊天历史记录，自下而上显示。
• 包含消息字段和发送按钮的底部条。

有人能给我提供一个工作的骨架吗？

我要疯掉这个css的东西了：

谢谢你的帮助！

Answer 1

我已经为你做了这整个聊天设置，请检查。问题是，您需要：

1. 在v-容器上添加class="fill-height"，以占用整个视图端口。
2. 将align="end"添加到v容器的v-行，以便消息出现在底部。

CODEPEN: https://codepen.io/aaha/pen/abdmazo

<div id="app">
  <v-app app>
    <v-app-bar color="blue" app>
      <v-app-bar-nav-icon>
       <v-icon color="white">mdi-arrow-left</v-icon>    
      </v-app-bar-nav-icon>
      <v-toolbar-title class="white--text"
        >Sushant </v-toolbar-title>
    </v-app-bar>
    <v-container class="fill-height">
      <v-row class="fill-height pb-14" align="end">
        <v-col>
          <div v-for="(item, index) in chat" :key="index" 
              :class="['d-flex flex-row align-center my-2', item.from == 'user' ? 'justify-end': null]">
            <span v-if="item.from == 'user'" class="blue--text mr-3">{{ item.msg }}</span>
            <v-avatar :color="item.from == 'user' ? 'indigo': 'red'" size="36">
               <span class="white--text">{{ item.from[0] }}</span>
            </v-avatar>
            <span v-if="item.from != 'user'" class="blue--text ml-3">{{ item.msg }}</span>
          </div>
        </v-col>
      </v-row>
    </v-container>
    <v-footer fixed>
      <v-container class="ma-0 pa-0">
        <v-row no-gutters>
          <v-col>
            <div class="d-flex flex-row align-center">
              <v-text-field v-model="msg" placeholder="Type Something" @keypress.enter="send"></v-text-field>
              <v-btn icon class="ml-4" @click="send"><v-icon>mdi-send</v-icon></v-btn>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-footer>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    chat: [
    ],
    msg: null,
  },
  methods: {
    send: function(){
      this.chat.push(
      {
        from: "user",
        msg: this.msg
      })
      this.msg = null
      this.addReply()
    },
    addReply(){
      this.chat.push({
        from: "sushant",
        msg: "Hmm"
      })
    }
  }
})