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

102
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>
@ -27,15 +27,17 @@
<div class="word-my" v-else>
<div class="outer">
<div class="information">
<p>{{ message.sendTime }} {{ message.nickname }} </p>
<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,66 +64,10 @@ 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:'',
myName: '',
myPic: '',
};
},
@ -131,24 +77,24 @@ export default {
this.init()
},
methods: {
send(){
send() {
if (!this.textarea) {
this.$message({type: 'warning', message: "请输入内容"})
this.$message({ type: 'warning', message: "请输入内容" })
} else {
let SendMessage={
let SendMessage = {
nickname: 'COOL',
pic: "1",
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")
console.log(this.messageList, "这是send")
}
},
init() {
const that=this
const that = this
if (typeof (WebSocket) === undefined) {
console.log("您的浏览器不支持WebSocket");
} else {
@ -164,10 +110,10 @@ export default {
console.log("websocket已打开");
};
socket.onmessage = function (msg) {
console.log(msg.data,1)
console.log(that.messageList,3)
that.messageList = msg.data
console.log(that.messageList,2)
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;