使用 vuetify 的简单聊天布局，聊天记录自下而上增长

Question

我想创建一个非常简单的网络聊天布局，但无法让聊天历史从下到上增长。我想坚持使用预定义的 vuetify 组件和命令，仅在真正需要时才使用自定义 css 修改。

布局应该是这样的：

• 3个主要栏目，中间从下往上显示聊天记录
• 底部栏包含消息字段和发送按钮

有人可以为此提供一个工作骨架吗？

我对这个 css 的东西要疯了 :(

感谢四位的帮助！

Answer 1

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

1. 在v-container上添加class="fill-height"，占据整个视口
2. 将 align="end" 添加到 v-container 的 v-row 中，以使消息显示在底部

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"
      })
    }
  }
})