前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue.js客服系统实时聊天项目开发(三)实现对话框聊天界面

vue.js客服系统实时聊天项目开发(三)实现对话框聊天界面

作者头像
唯一Chat
发布2023-01-15 09:49:08
4.7K0
发布2023-01-15 09:49:08
举报
文章被收录于专栏:陶士涵的菜地

接上面两篇继续,我来实现下对话框聊天界面,效果如下图:

 全部代码:

代码语言:javascript
复制
<template>
    <div class="chatAppBody">
        <div class="chatTitle">标题</div>
        <div class="chatBox">
            <div class="chatRow">
                <el-avatar class="chatAvatar" :size="30" src="https://goflychat.oss-cn-hangzhou.aliyuncs.com/static/upload/avator/2022June/32a988a3c2f8700119fa1f5da1b6a4bd.png"></el-avatar>
                <div class="chatMsgContent">
                    <div class="chatUsername">唯一客服系统</div>
                    <div class="chatContent">有什么可以帮您?</div>
                </div>
            </div>
            <div class="chatRow chatRowMe">
                <div class="chatContent">你好,这个客服系统多少钱?</div>
            </div>
        </div>
        <div class="chatBottom">输入框区域</div>
    </div>
</template>

<script>
    export default {
      name: 'ChatApp',
        data() {
          return {
          }
        },
        methods: {
        },
        mounted: function () {
        }
    }
</script>

<style lang="scss">
    .chatAppBody{
        display: flex;
        flex-direction: column;
        height: 100vh;
        background-color: #f1f5f8;
    }
    .chatTitle{
        background: #fff;
    }
    .chatBox{
        flex: 1;
        padding: 0 5px;
    }
    .chatBottom{
        background: #fff;
    }
    .chatRow{
        display: flex;
        align-items: flex-end;
        margin: 5px 0px;
    }
    .chatAvatar{
        margin-right: 5px;
        flex-shrink: 0;
    }
    .chatUsername {
        font-size: 12px;
        white-space: nowrap;
        color: #999;
        margin-bottom: 2px;
    }
    .chatContent{
        border-radius: 10px 10px 10px 0px;
        padding: 10px;
        background-color: rgb(255,255,255);
        box-shadow: 0 5px 30px rgb(50 50 93 / 8%), 0 1px 3px rgb(0 0 0 / 5%);
        font-size: 14px;
        word-break: break-all;
        line-height: 21px;
    }
    .chatRowMe{
        justify-content: flex-end;
    }
    .chatRowMe .chatContent{
        border-radius: 10px 10px 0px 10px;
    }
</style>

主要是使用了flex布局来实现的,这里面没用用float浮动,全部都是flex

.chatRow 中的 align-items: flex-end; 让其子元素在底部对齐,实现头像垂直方向靠下对齐

.chatRowMe 中的 justify-content: flex-end; 让其子元素在右边对齐。实现我的聊天水平方向靠右

界面宽度缩小时,头像不缩小:

"flex-shrink" 是 CSS Flexbox 布局中的一个属性。它定义了 flex 项目相对于其他项目的缩小比例。默认值为 1。当容器空间不足时,所有项目将缩小,比例由 flex-shrink 值决定。 如果 flex-shrink 为 0 则元素不能缩小,相当于关闭了缩小的功能。

例如上面代码中, .chatAvatar 元素设置了 flex-shrink 为 0,意味着它不能缩小。

总的来说,设置 flex-shrink 为 0 可以让一个元素在空间不足时保持原大小,不会缩小。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-01-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯企点客服
腾讯企点客服(Tencent QiDian Customer Service)是为销售和客服提供多渠道商机转化与客户服务的智能客服平台。基于腾讯云的即时通讯、音视频、人工智能、大数据、云呼叫中心等技术,以个性化服务和精准客户洞察撬动销售转化与复购增购。企点客服全面覆盖了从销售到服务的全链路业务场景,帮助企业构建一体化的客户运营体系,极大提升了企业获客、待客、留客的效率。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档