Cool
/
Chat-Vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改己方消息样式，以及对后端json字符串解析

This commit is contained in:
Cool 2023-11-26 14:49:01 +08:00
parent b06fc66df7
commit cd0091292e
1 changed files with 263 additions and 311 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/main/Chat.vue
View File

@ -8,7 +8,7 @@
<div v-for="(message, index) in messageList" :key="index">
<div class="word" v-if="!message.isMine">
<div class="word" v-if="!(message.nickname == 'COOL')">
<div class="information">
<p>{{ message.nickname }} {{ message.sendTime }}</p>
</div>
@ -29,13 +29,15 @@
<div class="information">
<p> {{ message.sendTime }} {{ message.nickname }} </p>
</div>
<div class="info">
<el-avatar :src="message.pic" class="head"></el-avatar>
<div class="message">
<div class="detail">
{{ message.message }}
</div>
</div>
<el-avatar :src="message.pic" class="head"></el-avatar>
</div>
</div>
@ -62,63 +64,7 @@ export default {
data() {
return {
messageList: [
{
nickname: 'Cool',
pic: require("@/assets/img/cool.jpg"),
sendTime: '2023/11/20 15:23:18',
message: '我怎么把文件放在服务器上，然后在公网对他进行访问?',
isMine: false,
},
{
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
},
{
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
},
{
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
}, {
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
}, {
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
},
{
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
}, {
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: false,
},
],
messageList: [],
textarea: "",
myName: '',
myPic: '',
@ -141,7 +87,7 @@ export default {
sendTime: '2023/11/20 18:23:18',
message: this.textarea,
}
socket.send(SendMessage);
socket.send(JSON.stringify(SendMessage));
this.textarea = "";
console.log(this.messageList, "这是send")
}
@ -164,9 +110,9 @@ export default {
console.log("websocket已打开");
};
socket.onmessage = function (msg) {
console.log(msg.data,1)
console.log(that.messageList,3)
that.messageList = msg.data
var data = JSON.parse(msg.data);
that.messageList = data
console.log(that.messageList[1].message, "nickname")
console.log(that.messageList, 2)
}
@ -273,7 +219,8 @@ export default {
.word-my {
//水平居右
display: flex;
justify-content: flex-end;
// justify-content: flex-end;
direction: rtl;
@ -293,16 +240,21 @@ export default {
margin-top: 10px;
font-size: 16px;
display: flex;
position: relative;
right: 10px;
.head {
margin-top: 10px;
margin-right: 10px;
position: relative;
right: 10px;
}
.message {
padding-right: 7px;
padding-left: 7px;
margin-right: 18px;
margin-right: 28px;
margin-top: 10px;
position: relative;
font-size: 16px;