css - 使用 vuetify 进行简单的聊天布局，聊天历史记录从下到上增长

Question

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

布局应如下所示:

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

有人可以提供一个工作框架吗？

我对这些 css 东西感到疯狂:(

谢谢四位的帮助!

Answer 1

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

1. 在 v 容器上添加 class="fill-height"，以占据整个视口(viewport)
2. 将 align="end" 添加到 v 容器的 v 行，以便消息显示在底部

密码: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"
      })
    }
  }
})