AI聊天-如何让我们的消息框悬浮在固定位置 第3集

如何让我们的消息框悬浮在固定位置 第3集

一、前言

上编已为大家介绍了如何画出类似微信一样的聊天记录
本编将为将为大家介绍 如何让我们的消息框如何悬浮在固定位

二、源码地址

本编的学习源码地址已经为大家准备好：从零开始搭建AI聊天

三、效果截图

四、实现思路

1、新建 组件chat-send组件

2、将发送消息框的样式迁移至chat-send组件

3、设置消息框的input框

4、设置css样式

五、代码讲解

1、chat-send组件的实现

<template>
  <div class="chat-send">
    <div style="display: flex;justify-content: center;align-content: center;align-items: center">
    <input type="textarea" v-model="textarea" class="send-input" placeholder="  请输入您的问题 按 enter 即发送" />
      <span>
        <img src="./../asserts/image/send.png" width="48" height="48">
      </span>
    </div>
  </div>
</template>

<script>
export default {
name: "chat-send",
  data(){
  return{
    textarea:"",
  }
  },
}
</script>

<style scoped>

.chat-send{
  text-align: center;
  border-radius: 10px;
  left: 56%;
  top: 92%;
  position: absolute;
  transform: translate(-50%,-50%);
}
.chat-send input{
  height: 6vh;
  width: 40vw;
  border-radius: 10px;
  background: rgba(254,255,253,0.5)
}
.chat-send button{
  height: 3vh;
  width: 3vw;
  border-radius: 10px;
}
</style>

2、主界面的发送消息框变更为 chat-send

<template>
  <div class="container">
    <div class="aside">
      <div class="logo">logo区域</div>
      <div>聊天选择区域</div>
    </div>
    <div class="main-right">
      <div class="header">标题区域</div>
      <chat-main></chat-main>
      <chat-send></chat-send>
    </div>
  </div>
</template>

<script>
import {setDeviceInfo} from "@/utils/storage";
import ChatMain from "@/components/chat-main";
import ChatSend from "@/components/chat-send";
export default {
name: "index",
  components: {ChatSend, ChatMain},
  data(){
  return{
    deviceType:1, //1pc 2h5
  }
  },
  mounted() {
    this.clientWidth()
  },
  methods:{
    clientWidth(){
      //监听宽度,判断是否关闭对应的菜单
      let deviceInfo = 'pc';
      this.deviceType = 1
      if(document.body.clientWidth>document.body.clientHeight){
        setDeviceInfo(deviceInfo);
      }else{
        deviceInfo = 'h5'
        this.deviceType = 2
        setDeviceInfo(deviceInfo);
      }
    },
  },


}
</script>

<style scoped>
.container{
  text-align: center;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.aside{
  width: 13vw;
  height: calc(100vh);
  background: #f1f0f0;
}
.logo{
  width: 13vw;
  height: 12vh;
}
.main-right{
  width: 87vw;
  height: calc(100vh);
}
.header{
  width: 100%;
  height:7vh;
  background: white;
}


</style>

六、重难度讲解

1、注意在迁移主界面的发送消息框区域内容的过程中，需要做到对应的样式进行迁移

2、迁移的发送消息框组件 chat-send 需要设置position: absolute;根据个人的界面情况设置left 和top 距离

.chat-send{
  text-align: center;
  border-radius: 10px;
  left: 56%;
  top: 92%;
  position: absolute;
  transform: translate(-50%,-50%);
}

3、根据界面样式判断是否需要设置发送消息框的不透明度 rgba(254,255,253,0.5)

.chat-send input{
  height: 6vh;
  width: 40vw;
  border-radius: 10px;
  background: rgba(254,255,253,0.5)
}

七、下一集预告

下一集将会为大家讲解 如何让我们的消息发送给机器人
本编将到这里，如果个人的分享，大佬有什么更优的办法实现，欢迎提出来，最后帮忙关注并点赞哦，
还没下载源码的请前往从零开始搭建AI聊天