基于vue实现网页聊天室样式

由于近期DS非常火热，网页聊天框这个老生常谈的需求又被揪出来集成到网页中

思路：先实现大体框架，承载聊天信息的盒子与发送消息的盒子

<template>
    <div id="chat_components_box">
        <div id="msg_box">
            <div class="single_msg_box" v-for="item in msg_data" :key="item.id">
                <div :class="['avatar', item.className]" v-if="item.avatar_directions == 'left'"></div>
                <div
                    :class="item.className == 'user' ? ['message', 'right_msg', 'user_msg'] : item.avatar_directions == 'right' ? ['message', 'right_msg'] : ['message', 'left_msg']">
                    <pre>{{ item.msg }}</pre>
                    <div class="image_box" v-if="item.show_components">
                    </div>
                </div>
                <div :class="['avatar', item.className]" v-if="item.avatar_directions == 'right'"></div>
            </div>
        </div>
        <div id="send_box">
            <div id="user_avatar"></div>
            <div id="user_input"><input type="text" placeholder="输入问题或'/'获取提示词" v-model="user_input_msg"></div>
            <div id="user_send_msg" @click="user_send_msg"></div>
        </div>
    </div>
</template>

这里由于要对本人发出的消息进行单独处理，以及需要区分发送消息还是接收消息，还需要在聊天框中插入图片或其他组件，所以充斥了许多的vif判断

创建好我们的网页结构之后我们定义变量

let user_input_msg = ref("")
const msg_data = reactive([
    {
        id: 0,
        avatar_directions: 'right',
        className: "user",
        msg: "access",
        show_components: false
    }
])

定义点击发送消息事件

const user_send_msg = () => {
    msg_data.push({
        id: msg_data.length,
        avatar_directions: 'right',
        className: "user",
        msg: user_input_msg.value
    })
    user_input_msg.value = ''
}

定义完成后看成品