|
|
@@ -24,7 +24,7 @@
|
|
|
src="https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg"
|
|
|
></el-avatar>
|
|
|
</div>
|
|
|
- <div class="group-record-item">
|
|
|
+ <div class="firend-group-item">
|
|
|
<!-- 链接 -->
|
|
|
<a
|
|
|
class="message-content-text receive-record-item"
|
|
|
@@ -71,7 +71,11 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- self send msg record -->
|
|
|
- <div v-if="item.toid !== socket.id" class="record-item send-record">
|
|
|
+ <div
|
|
|
+ v-if="item.toid !== socket.id"
|
|
|
+ v-contextmenu="'message' + item.msg + item.toid"
|
|
|
+ class="record-item send-record"
|
|
|
+ >
|
|
|
<!-- 链接 -->
|
|
|
<a
|
|
|
class="message-content-text"
|
|
|
@@ -125,6 +129,15 @@
|
|
|
src="https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg"
|
|
|
></el-avatar>
|
|
|
</div> -->
|
|
|
+ <!-- 自定义右键菜单 -->
|
|
|
+ <v-contextmenu :ref="'message' + item.msg + item.toid">
|
|
|
+ <v-contextmenu-item v-if="item.type === 'text'" @click="handleCommand('COPY', item)"
|
|
|
+ >复制</v-contextmenu-item
|
|
|
+ >
|
|
|
+ <v-contextmenu-item @click="handleCommand('REVOKE', item)"
|
|
|
+ >撤回</v-contextmenu-item
|
|
|
+ >
|
|
|
+ </v-contextmenu>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
@@ -396,6 +409,36 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
...mapMutations("chat", ["set_friend_record", "set_room_record"]),
|
|
|
+
|
|
|
+
|
|
|
+ handleCommand(type, message) {
|
|
|
+ if (type === 'COPY') {
|
|
|
+ // 复制功能
|
|
|
+ const copy = (e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ if (e.clipboardData) {
|
|
|
+ e.clipboardData.setData('text/plain', message.msg);
|
|
|
+ } else if (window.clipboardData) {
|
|
|
+ window.clipboardData.setData('Text', message.msg);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ window.addEventListener('copy', copy);
|
|
|
+ document.execCommand('Copy');
|
|
|
+ window.removeEventListener('copy', copy);
|
|
|
+ this.$message.info('已粘贴至剪切板');
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ } else if (type === 'REVOKE') {
|
|
|
+ this.$message.error('暂不支持')
|
|
|
+ // 消息撤回功能
|
|
|
+ // this.socket.emit('revokeMessage', {
|
|
|
+ // userId: this.user.userId, // 当前用户Id
|
|
|
+ // username: this.user.username, // 当前用户名称
|
|
|
+ // groupId: this.activeRoom.groupId, // 当前群组Id
|
|
|
+ // friendId: this.activeRoom.userId, // 当前好友Id
|
|
|
+ // _id: message._id, // 撤回的消息Id
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ },
|
|
|
handleSuccess(res, file) {
|
|
|
console.log(`res`, res);
|
|
|
this.imageUrl = URL.createObjectURL(file.raw);
|
|
|
@@ -619,6 +662,7 @@ export default {
|
|
|
// 将输入框中的图片替换为emoji表情
|
|
|
formatInputCon() {
|
|
|
let inputValue = document.getElementById("charInput").innerHTML;
|
|
|
+ console.log(`inputValue`, inputValue)
|
|
|
inputValue = inputValue.replace(/<img.*?(?:>|\/>)/gi, val => {
|
|
|
let unicode =
|
|
|
"!!" + val.match(/unicode=[\'\"]?([^\'\"]*)[\'\"]?/i)[1] + "!!";
|
|
|
@@ -627,7 +671,7 @@ export default {
|
|
|
});
|
|
|
|
|
|
inputValue = inputValue.replace(/&/gi, "&"); // 还原&
|
|
|
- inputValue = inputValue.replace(/<img src=\"http:\/\/localhost:8080/gi, "<img src=\""); // 去掉复制表情图片的baseurl
|
|
|
+ inputValue = inputValue.replace(/<img src=\"http:\/\/localhost:8080/gi, "<img src=\""); // 去掉复制表情图片的baseurl
|
|
|
|
|
|
return inputValue;
|
|
|
},
|
|
|
@@ -705,6 +749,7 @@ export default {
|
|
|
const data =
|
|
|
e.clipboardData.getData("text/html") ||
|
|
|
e.clipboardData.getData("text/plain");
|
|
|
+ console.log(`data`, data)
|
|
|
const reg = /<img\s+.*?src=(?:'(.+?)'|"(.+?)")\s*.*?(?:>|\/>)/gim;
|
|
|
const srcReg = /^(?!<img src=\"http:\/\/localhost:8080).*/gim // 匹配不以<img src=\"http:\/\/localhost:8080)开头
|
|
|
const imgArr = data.match(reg);
|
|
|
@@ -812,6 +857,7 @@ export default {
|
|
|
font-size: 14px;
|
|
|
color: gray;
|
|
|
}
|
|
|
+.firend-group-item > span,
|
|
|
.group-record-item > span {
|
|
|
padding: 8px 12px;
|
|
|
border-radius: 5px;
|
