首页 > 其他分享 >使用vue制作一个聊天框

使用vue制作一个聊天框

时间:2023-07-30 10:35:32浏览次数:41  
标签:flex vue color text border 聊天 message font 制作

   

使用 Vue 制作的简单聊天框:

<template>
  <div class="chat-box">
    <div class="message-list">
      <div class="message" v-for="(message, index) in messages" :key="index">
        <div class="message-content" :class="{ 'self': message.self }">
          <span v-if="!message.self" class="message-user">{{ message.user }}</span>
          <div class="message-text">{{ message.text }}</div>
        </div>
      </div>
    </div>
    <div class="input-box">
      <input type="text" v-model="messageText" @keydown.enter="addMessage" placeholder="请输入消息内容">
      <button @click="addMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { user: '小明', text: '你好啊', self: false },
        { user: '', text: '你好', self: true }
      ],
      messageText: ''
    };
  },
  methods: {
    addMessage() {
      if (!this.messageText) return;
      this.messages.push({
        user: '',
        text: this.messageText,
        self: true
      });
      this.messageText = '';
    }
  }
};
</script>

<style>
.chat-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.message-list {
  flex: 1;
  overflow-y: auto;
}

.message {
  display: flex;
  margin: 4px 0;
}

.self .message-content {
  justify-content: flex-end;
}

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 70%;
  padding: 6px 10px;
  background-color: #d9edf7;
  border-radius: 15px;
}

.message-user {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 6px;
}

.message-text {
  font-size: 14px;
}
.input-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
}

.input-box input {
  flex: 1;
  margin-right: 10px;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 5px;
  border: none;
  outline: none;
}

.input-box button {
  padding: 6px 20px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.input-box button:hover {
  background-color: #388e3c;
}
</style>
 

标签:flex,vue,color,text,border,聊天,message,font,制作
From: https://www.cnblogs.com/explore-03/p/17591084.html

相关文章

  • vue2遇到的一些错误
    一、VUE中的VUEX如何调用modules里面的mutations和state ...mapMutations("workflow",['setApproverConfig','setApprover']),二、Non-nestedroutesmustincludealeadingslashcharacter.Fixthefollowingroutes:-JSExpression 出错点Non-nest......
  • Vue第一季
    001.Vue核心Vue简介初识1.1.Vue简介1.1.1.官网●英文官网●中文官网1.1.2.介绍与描述●Vue是一套用来动态构建用户界面的渐进式JavaScript框架○构建用户界面:把数据通过某种办法变成用户界面○渐进式:Vue可以自底向上逐层的应用,简单应用只需要一个轻量小巧的核心......
  • Linux 下的 U 盘镜像制作
    1)准备一个U盘,例如系统识别为/dev/sdb,删掉其分区(fdisk/dev/sdb,thend,thenw)2)$sudoddif=/path/to/*.isoof=/dev/sdb不过上述命令没有进度显示,干着急……3)安装pv(pipeviewer)$sudoapt-getinstallpv4)使用pv写镜像,$pv/path/to/*.iso|sudoddof=/dev/s......
  • Vue3 Vite electron 开发桌面程序
    Electron是一个跨平台的桌面应用程序开发框架,它允许开发人员使用Web技术(如HTML、CSS和JavaScript)构建桌面应用程序,这些应用程序可以在Windows、macOS和Linux等操作系统上运行。Electron的核心是Chromium浏览器内核和Node.js运行时环境。Chromium内核提供了现代浏览器的功能,例如HTML......
  • Vue3.3 编译宏
    Vue3.3新增了一些语法糖和宏,包括泛型组件、defineSlots、defineEmits、defineOptionsdefineProps父子组件传参<template><div><Childname="xiaoman"></Child></div></template><scriptlang='ts'setup>importChildf......
  • Vue3 如何开发移动端(安卓,ios)
    Vue3有没有一款好用的开发移动端的工具1.uniapp我个人认为uniapp适合开发小程序之类的,用这个去开发原生应用会存在一些问题性能限制:由于Uniapp是通过中间层实现跨平台,应用在访问底层功能时可能存在性能损失。与原生开发相比,Uniapp在处理大规模数据、复杂动画和高性能要求的应......
  • 洛谷 P3243 [HNOI2015] 菜肴制作 - toposort 需自己理解翻译题面
    P3243[HNOI2015]菜肴制作题目描述知名美食家小A被邀请至ATM大酒店,为其品评菜肴。ATM酒店为小A准备了\(n\)道菜肴,酒店按照为菜肴预估的质量从高到低给予\(1\)到\(n\)的顺序编号,预估质量最高的菜肴编号为\(1\)。由于菜肴之间口味搭配的问题,某些菜肴必须在另一些......
  • Vue项目如何生成树形目录结构
    前言项目的目录结构清晰、可以帮助我们更快理顺项目的整体构成。在写文档之类的时候也比较方便。生成树形目录的方式有多种,我这里简单介绍其中一种较为简单的实现过程1、安装依赖建议使用管理员命令窗口执行该命令npminstallmddir-g2、使用生成目录在项目根目录下执行mddir,然......
  • 关于vue element-admin 切换tag, 页面刷新 以及内存增加不释放问题
    1:切换tag,页面刷新,检查了路由,配置了  nocache:false,以及isKeep:true, 但是在页面tag切换时,还是会刷新,, 在生命周期中打印,发现能够打印,, 检查了代码,在组件引用中未发现v-if的使用, 最后竟查找,借鉴 https://blog.csdn.net/weixin_45616483/article/details/122959997 ......
  • 官网的VUE
    看了官网之后,发现官网上以初学都不是太友好但是对已经有一定基础的人来说是非常好了,建议初学者先去菜鸟那里对VUE有了初步了解,再去看官网的教程官网的教程可以根据自己的喜好,选择相应的学习模式,然后进行学习,目前我计划先把教程从头看一次,然后再看一下互动教程,以及官网的各种试......