Vue3实现一个类微信聊天界面

• 编写一个类微信聊天界面要求除了常规功能外，顶部有一个系统状态栏，显示当前时间，精确到秒

• 其中icon使用了http://www.fontawesome.com.cn/get-started/ UI库（下图未放icon）

<template>

&lt;div class=&quot;box&quot;&gt;
    &lt;div class=&quot;header&quot;&gt;
        &lt;div class=&quot;status&quot;&gt;
            &lt;span&gt;
                &lt;i class=&quot;fa fa-wifi&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
            &lt;/span&gt;
            &lt;span style=&quot;float: right&quot;&gt;
                &lt;i class=&quot;fa fa-battery-quarter&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
                {{timer}}
            &lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;info&quot;&gt;
            &lt;span style=&quot;float: left;margin-left: 5px;&quot;&gt;
                &lt;i class=&quot;fa fa-chevron-left&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
            &lt;/span&gt;
            &lt;span&gt;群聊1&lt;/span&gt;
            &lt;span style=&quot;float: right;margin-right: 5px;&quot;&gt;
                &lt;i class=&quot;fa fa-ellipsis-h&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
            &lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;content&quot;&gt;
        &lt;div v-for=&quot;item, index in news_items&quot; class=&quot;new_box&quot;&gt;


            &lt;div v-if=&quot;item.isMe === true&quot; style=&quot;width: 100%;text-align: right;&quot;&gt;
                &lt;div style=&quot;display: inline-block;margin-left: 10px&quot;&gt;
                    &lt;div class=&quot;new_box_detail&quot;&gt;{{item.content}}&lt;/div&gt;
                &lt;/div&gt;
                &lt;img :src='item.avatar' alt=&quot;&quot;&gt;
            &lt;/div&gt;


            &lt;div v-if=&quot;item.isMe === false&quot;&gt;
                &lt;img :src='item.avatar' alt=&quot;&quot;&gt;
                &lt;div style=&quot;display: inline-block;margin-left: 10px;&quot;&gt;
                    &lt;span&gt;{{item.name}}&lt;/span&gt;
                    &lt;br&gt;
                    &lt;div class=&quot;new_box_detail&quot;&gt;{{item.content}}&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;input_box&quot;&gt;
        &lt;i class=&quot;fa fa-commenting fa-2x&quot; aria-hidden=&quot;true&quot; style=&quot;margin: 10px&quot;&gt;&lt;/i&gt;
        &lt;span&gt;&lt;input type=&quot;text&quot; name=&quot;input_content&quot; @keyup.enter=&quot;enterKeyDown&quot; v-model=&quot;new_info&quot;&gt;&lt;/span&gt;
        &lt;i class=&quot;fa fa-smile-o fa-2x&quot; aria-hidden=&quot;true&quot; style=&quot;margin-left: 10px&quot;&gt;&lt;/i&gt;
        &lt;i class=&quot;fa fa-plus-circle fa-2x&quot; aria-hidden=&quot;true&quot;  style=&quot;margin-left: 10px&quot;&gt;&lt;/i&gt;
    &lt;/div&gt;
&lt;/div&gt;

</template>
<script setup lang="ts">
import { reactive, ref } from ‘vue’
interface NewsItemsInterface {
  id: number
  avatar: string
  isMe: boolean
  content: string
  name: string
}
let news_items: NewsItemsInterface[] = reactive([
  {
    id: 1,
    avatar: ‘https://npm.elemecdn.com/cdn-pictures@0.0.0/avatar/pic/MilkTea.png',
    content: ‘用户1消息’,
    name: ‘小王’,
    isMe: false
  },
  {
    id: 2,
    avatar: ‘https://npm.elemecdn.com/cdn-pictures@0.0.0/avatar/pic/MilkTea.png',
    content: ‘我的消息’,
    name: ‘小吴’,
    isMe: true
  },
  {
    id: 3,
    avatar: ‘https://npm.elemecdn.com/cdn-pictures@0.0.0/avatar/pic/MilkTea.png',
    content: ‘用户2消息用户2消息用户2消息’,
    name: ‘小李’,
    isMe: false
  },
])
let timer = ref(‘’)
let new_info = ref(‘’)
const toDateYMDHMS = () => {
  const date = new Date()
  const h = date.getHours() < 10 ? 0${date.getHours()}: : date.getHours() + ‘:’
  const m = date.getMinutes() < 10 ? 0${date.getMinutes()}: : date.getMinutes() + ‘:’
  const s = date.getSeconds() < 10 ? 0${date.getSeconds()} : date.getSeconds()
  return h + m + s
}
setInterval(() => {
    timer.value = toDateYMDHMS()
}, 1000)
const enterKeyDown = () => {
    news_items.push({
        id: 2,
        avatar: ‘https://npm.elemecdn.com/cdn-pictures@0.0.0/avatar/pic/MilkTea.png',
        content: new_info.value,
        name: ‘小吴’,
        isMe: true
    })
    new_info.value = ‘’
}
</script>
<style scoped>
.box {
    margin: 0 auto;
    height: 100%;
    width: 60vw;
    border: 1px rgb(0, 0, 0) solid;
}
/* ————————————————————————- /
.header {
    height: 80px;
    / border: 1px cyan solid; /
    background-color: rgb(231, 231, 231);
}
.header .status {
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}
.header .info {
    height: 50px;
    line-height: 50px;
    text-align: center;
}
/ ————————————————————————- /
.content {
    / border: 1px red solid; /
    background-color: rgb(164, 201, 201);
    height: 75vh
}
.content .new_box img {
    width: 30px;
}
.content .new_box_detail {
    background-color: rgb(255, 255, 255);
    padding: 5px;
}
/ ————————————————————————- /
.input_box {
    / border: 1px blueviolet solid; */
    height: 60px;
    line-height: 60px;
    background-color: rgb(231, 231, 231);
}
.input_box input {
    width: 70%;
    border: none;
    outline: none;
    height: 60%;
}
.input_box input:focus {
    outline: none;
}
</style>