聊天主页面的布局设计,接着改代码
<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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现