20240612每日前端-------vue3实现聊天室(一)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
先上效果图
讲讲布局设计
聊天室大致分三块:
- 左边导航
- 右边聊天界面主界面
单独调整一下样式: - 外层friend-box先调整布局为flex,这样方便进行自适应布局,增加背景色为白色,设置边框圆角使得外观更加美观,使用绝对定位,并且设置top,left,transform: translateX(-50%) translateY(-50%);保证水平垂直居中。
- 内层左边friend-aside设置固定宽度60px,增加右边框属性,区分左右聊天界面,设置布局为flex自适应,设置自适应flex-direction: column;从上到下,自适应排序。设置justify-content: space-between;设置元素等距。
- 内层右边friend-bode设置flex填充右边剩余界面。
.friend-box {
display: flex;
background-color: var(--white);
border-radius: 10px;
position: absolute;
width: 100%;
height: 80vh;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
overflow: hidden;
}
.friend-aside {
width: 60px;
border-right: 1px solid var(--maxLightGray);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.friend-bode {
flex: 1;
display: flex;
}




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:18 天前 )
9e887079
[skip ci] 11 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
更多推荐
所有评论(0)