po3a  

聊天主页面的布局设计,接着改代码

复制代码
<template>
  <div class="container">
  <div class="chat-app">
    <el-container>
      <el-container>
        <div>
          <el-container class="header">
            <MyHeader></MyHeader>
          </el-container>
        </div>
        <div>
          <el-main class="el-main" style="padding: 0 ; ">

            <div class="messages-container">
              <div
                  v-for="(message, index) in messages"
                  :key="index"
                  :class="{'message': true, 'is-user': message.isUser}"
              >

                <el-avatar :icon="message.isUser ? 'el-icon-user-solid' : 'el-icon-s-help'"></el-avatar>

                <el-card class="message-content" :class="{'user-message': message.isUser}">
                  {{ message.text }}
                </el-card>
              </div>
            </div>
          </el-main>
        </div>
        <el-footer class="el-footer" style="text-align: right; padding: 20px;">
          <el-input
              v-model="inputMessage"
              type="textarea"
              placeholder="输入消息..."
              @keyup.enter="sendMessage"
          ></el-input>
          <el-button class="el-button--primary" type="primary" @click="sendMessage">发送</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </div>
  </div>
</template>
复制代码

 

posted on   po3a  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
 
点击右上角即可分享
微信分享提示