vue.js客服系统实时聊天项目开发（五）flex布局实现输入框区域

在聊天界面的输入框区域，我的实现代码是下面这样的

效果图

样式内容是

.chatArea{

margin: 0px 10px;

margin-bottom: 10px;

display: flex;

padding: 6px 5px;

align-items: center;

flex:1;

box-shadow: 0 5px 30px rgb(50 50 93 / 8%), 0 1px 3px rgb(0 0 0 / 5%);

border-radius: 10px;

background: #fff;

}

.chatArea .iconfont{

color: #383838;

font-size: 18px;

margin: 0px 5px;

cursor: pointer;

}

.chatArea .iconfont:hover{

color: #409eff;

}

.chatAreaInput{

border-radius: 10px;

border: none;

flex: 1;

outline: none;

resize: none;

box-sizing: border-box;

color: #505050;

min-height: 35px;

font-size: 16px;

}

.chatCopyright{

color: #999a9b;

font-size: 12px;

text-align: center;

margin-bottom: 10px;

filter: grayscale(1);

opacity: .9;

font-family: Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Tahoma,Arial,sans-serif;

}

这段代码中的布局主要采用了 flex 布局。

.chatArea 类使用了 display: flex; 属性，将其子元素沿着水平方向排列。其子元素包括了一个文本域、一个加号图标和一个发送按钮图标。

文本域使用了 flex: 1; 属性，使其占据父元素剩余所有的空间，这样文本域就会填满整个父元素，而加号和发送按钮图标则只占用它们自己的空间。

整个聊天区域的父元素是.chatBottom，而.chatCopyright 是.chatBottom的兄弟元素,因此它们不受 flex 布局的影响。

总体上来看，这段代码中使用了 flex 布局来让文本域占据整个聊天区域，而加号和发送按钮图标则放置在文本域的两侧。

查看原文