質問編集履歴
6
追記５追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -247,4 +247,23 @@
|
|
|
247
247
|
|
|
248
248
|
|
|
249
249
|
|
|
250
|
-
|
|
250
|
+
|
|
251
|
+
|
|
252
|
+
#追記５
|
|
253
|
+
|
|
254
|
+
```ここに言語を入力
|
|
255
|
+
{
|
|
256
|
+
path: "/chat/:id",
|
|
257
|
+
name: "Chat",
|
|
258
|
+
component: Chat,
|
|
259
|
+
meta: { requiresAuth: true },
|
|
260
|
+
},
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
```ここに言語を入力
|
|
264
|
+
deleteMessage(key) {
|
|
265
|
+
firebase
|
|
266
|
+
.database()
|
|
267
|
+
.ref("${this.$route.params.id}/key")
|
|
268
|
+
.remove();
|
|
269
|
+
```
|
5
追記４訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
#追記４
|
|
211
211
|
|
|
212
212
|
```ここに言語を入力
|
|
213
|
-
<div @click.prevent="deleteMessage(key)" class="mymessage">
|
|
213
|
+
<div @click.right.prevent="deleteMessage(key)" class="mymessage">
|
|
214
214
|
{{key}}
|
|
215
215
|
<nl2br tag="div" :text="message" />
|
|
216
216
|
</div>
|
4
追記４追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -205,4 +205,46 @@
|
|
|
205
205
|
</section>
|
|
206
206
|
</transition-group>
|
|
207
207
|
|
|
208
|
-
```
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
#追記４
|
|
211
|
+
|
|
212
|
+
```ここに言語を入力
|
|
213
|
+
<div @click.prevent="deleteMessage(key)" class="mymessage">
|
|
214
|
+
{{key}}
|
|
215
|
+
<nl2br tag="div" :text="message" />
|
|
216
|
+
</div>
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
```ここに言語を入力
|
|
220
|
+
deleteMessage(key) {
|
|
221
|
+
console.log(key);
|
|
222
|
+
firebase
|
|
223
|
+
.database()
|
|
224
|
+
.ref()
|
|
225
|
+
.remove();
|
|
226
|
+
this.$swal({
|
|
227
|
+
title: "内容確認",
|
|
228
|
+
text: "メッセージを削除しますか？",
|
|
229
|
+
icon: "warning",
|
|
230
|
+
buttons: true,
|
|
231
|
+
dangerMode: true,
|
|
232
|
+
}).then((willDelete) => {
|
|
233
|
+
if (willDelete) {
|
|
234
|
+
this.$swal("メッセージを削除しました", {
|
|
235
|
+
icon: "success",
|
|
236
|
+
});
|
|
237
|
+
this.$router.go({
|
|
238
|
+
path: `/chat/${this.$route.params.id}`,
|
|
239
|
+
force: true,
|
|
240
|
+
});
|
|
241
|
+
} else {
|
|
242
|
+
this.$swal("キャンセルしました。");
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
},
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
|
3
追記３を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -147,4 +147,62 @@
|
|
|
147
147
|
```
|
|
148
148
|
|
|
149
149
|
#追記2
|
|
150
|
-
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
#追記３
|
|
154
|
+
```ここに言語を入力
|
|
155
|
+
<template>
|
|
156
|
+
<div class="chat">
|
|
157
|
+
<h1 class="chat-tll flex">
|
|
158
|
+
<div class="flash neon">Chat Room</div>
|
|
159
|
+
<router-link :to="`/board/${this.uid}`" class="back-btn">
|
|
160
|
+
<img
|
|
161
|
+
src="../assets/戻る.jpg"
|
|
162
|
+
alt="チャット終了"
|
|
163
|
+
class="back-btn-icon"
|
|
164
|
+
/>
|
|
165
|
+
</router-link>
|
|
166
|
+
</h1>
|
|
167
|
+
<!--Firebase から取得したリストを描画-->
|
|
168
|
+
<transition-group name="chat" tag="div" class="list content">
|
|
169
|
+
<!--chatの中の{ key, name, image, message ,userid }をそれぞれ取得-->
|
|
170
|
+
<section
|
|
171
|
+
v-for="{ key, name, image, message, userid, time } in chat"
|
|
172
|
+
:key="key"
|
|
173
|
+
>
|
|
174
|
+
<div v-if="userid === user.uid" class="myitem flex">
|
|
175
|
+
<!-- 自身 -->
|
|
176
|
+
<!--「画像」の指定-->
|
|
177
|
+
|
|
178
|
+
<!--「名前」と「メッセージ」の指定-->
|
|
179
|
+
<div class="mydetail">
|
|
180
|
+
<div class="mytime">{{ $dayjs(time).format("hh:mm") }}</div>
|
|
181
|
+
<div @click.right.prevent="deleteMessage(key)" class="mymessage">
|
|
182
|
+
<nl2br tag="div" :text="message" />
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="myimage flex">
|
|
186
|
+
<img :src="image" width="40" height="40" />
|
|
187
|
+
<div class="myname">{{ profileDeta.name }}</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
<div v-else class="otheritem flex">
|
|
191
|
+
<!-- 自身ではない -->
|
|
192
|
+
<!--「画像」の指定-->
|
|
193
|
+
<div class="otherimage flex">
|
|
194
|
+
<img :src="image" width="40" height="40" />
|
|
195
|
+
<div class="othername">name</div>
|
|
196
|
+
</div>
|
|
197
|
+
<!--「名前」と「メッセージ」の指定-->
|
|
198
|
+
<div class="otherdetail">
|
|
199
|
+
<div class="othermessage">
|
|
200
|
+
<nl2br tag="div" :text="message" />
|
|
201
|
+
</div>
|
|
202
|
+
<div class="othertime">{{ $dayjs(time).format("hh:mm") }}</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
</section>
|
|
206
|
+
</transition-group>
|
|
207
|
+
|
|
208
|
+
```
|
2
画像追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -144,4 +144,7 @@
|
|
|
144
144
|
},
|
|
145
145
|
},
|
|
146
146
|
};
|
|
147
|
-
```
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
#追記2
|
|
150
|
+
|
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -63,4 +63,85 @@
|
|
|
63
63
|
z-index: 5;
|
|
64
64
|
user-select: none;
|
|
65
65
|
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
#追記
|
|
69
|
+
```ここに言語を入力
|
|
70
|
+
methods: {
|
|
71
|
+
// スクロール位置を一番下に移動
|
|
72
|
+
scrollBottom() {
|
|
73
|
+
this.$nextTick(() => {
|
|
74
|
+
//this.$nextTickは、再描画を待つ。
|
|
75
|
+
//絶対値からbody要素の高さを取得
|
|
76
|
+
window.scrollTo(0, document.body.clientHeight);
|
|
77
|
+
});
|
|
78
|
+
},
|
|
79
|
+
childAdded(snap) {
|
|
80
|
+
//snapshotとは、ある時点における特定のデータベース参照にあるデータの全体像を写し取ったもの
|
|
81
|
+
//childAdded：データベースからアイテムのリストを取得する関数
|
|
82
|
+
// 受け取ったメッセージをchatに追加
|
|
83
|
+
const message = snap.val();
|
|
84
|
+
//イベントのときにデータベース内の「message」データを取得。
|
|
85
|
+
// データベースに新しい要素が追加されると随時呼び出される
|
|
86
|
+
this.chat.push({
|
|
87
|
+
key: snap.key,
|
|
88
|
+
name: message.name,
|
|
89
|
+
image: message.image,
|
|
90
|
+
message: message.message,
|
|
91
|
+
userid: message.userid,
|
|
92
|
+
time: message.time,
|
|
93
|
+
});
|
|
94
|
+
this.scrollBottom();
|
|
95
|
+
//スクロールの一番下に追加。
|
|
96
|
+
},
|
|
97
|
+
doSend() {
|
|
98
|
+
const time = time;
|
|
99
|
+
if (this.user.uid && this.input.length) {
|
|
100
|
+
// firebaseに書き込まれたメッセージを追加
|
|
101
|
+
firebase
|
|
102
|
+
.database()
|
|
103
|
+
.ref(this.$route.params.id)
|
|
104
|
+
.push(
|
|
105
|
+
{
|
|
106
|
+
message: this.input,
|
|
107
|
+
name: this.user.displayName,
|
|
108
|
+
image: this.user.photoURL,
|
|
109
|
+
userid: this.user.uid,
|
|
110
|
+
time: firebase.database.ServerValue.TIMESTAMP,
|
|
111
|
+
},
|
|
112
|
+
|
|
113
|
+
() => {
|
|
114
|
+
this.input = ""; // フォームを空にする
|
|
115
|
+
}
|
|
116
|
+
);
|
|
117
|
+
console.log(time);
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
deleteMessage() {
|
|
121
|
+
firebase
|
|
122
|
+
.database()
|
|
123
|
+
.ref()
|
|
124
|
+
.remove();
|
|
125
|
+
this.$swal({
|
|
126
|
+
title: "内容確認",
|
|
127
|
+
text: "メッセージを削除しますか？",
|
|
128
|
+
icon: "warning",
|
|
129
|
+
buttons: true,
|
|
130
|
+
dangerMode: true,
|
|
131
|
+
}).then((willDelete) => {
|
|
132
|
+
if (willDelete) {
|
|
133
|
+
this.$swal("メッセージを削除しました", {
|
|
134
|
+
icon: "success",
|
|
135
|
+
});
|
|
136
|
+
this.$router.go({
|
|
137
|
+
path: `/chat/${this.$route.params.id}`,
|
|
138
|
+
force: true,
|
|
139
|
+
});
|
|
140
|
+
} else {
|
|
141
|
+
this.$swal("キャンセルしました。");
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
},
|
|
145
|
+
},
|
|
146
|
+
};
|
|
66
147
|
```
|