-
Notifications
You must be signed in to change notification settings - Fork 468
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: 支持粘贴图片,修复更改个人名称和修改徽章,消息列表个人信息未更新,支持图片消息复制。
- Loading branch information
Showing
9 changed files
with
173 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
src/views/Home/components/ChatBox/PasteImageDialog/index.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
<script setup lang="ts"> | ||
import { ref, watchEffect, inject } from 'vue' | ||
import { useEventListener } from '@vueuse/core' | ||
import { MsgEnum } from '@/enums' | ||
import { useUserStore } from '@/stores/user' | ||
const imageBody = ref({ url: '' }) | ||
const pasteFile = ref<File>() // 记录input文本内容 | ||
const visible = ref(false) | ||
const userStore = useUserStore() | ||
const onChangeMsgType = inject<(msgType: MsgEnum) => void>('onChangeMsgType') | ||
const onChangeFile = inject<(file: File[]) => void>('onChangeFile') | ||
useEventListener(window, 'paste', (e) => { | ||
e.preventDefault() | ||
if (!userStore.isSign) return false // 未登录不支持粘贴图片交互 | ||
if (e.clipboardData && e.clipboardData.files?.length) { | ||
const file = e.clipboardData.files[0] | ||
// TODO 可支持粘贴文件。 | ||
if (file?.type.includes('image')) { | ||
pasteFile.value = file | ||
} | ||
} | ||
return false | ||
}) | ||
watchEffect(() => { | ||
if (pasteFile?.value) { | ||
visible.value = true | ||
imageBody.value = { | ||
url: URL.createObjectURL(pasteFile?.value), | ||
} | ||
} else { | ||
visible.value = false | ||
} | ||
}) | ||
const onSend = async () => { | ||
if (!pasteFile?.value) return | ||
// FIXME 如下逻辑可以尝试抽为 hook | ||
onChangeMsgType?.(MsgEnum.IMAGE) // 设置上传类型为图片 | ||
await onChangeFile?.([pasteFile?.value]) // 上传文件并发送消息 | ||
visible.value = false // 关闭弹窗 | ||
URL.revokeObjectURL(imageBody.value.url) | ||
pasteFile.value = undefined | ||
imageBody.value = { | ||
url: '', | ||
} | ||
} | ||
</script> | ||
|
||
<template> | ||
<ElDialog | ||
class="image-paste-modal" | ||
title="粘贴图片" | ||
v-model="visible" | ||
:close-on-click-modal="false" | ||
center | ||
> | ||
<img v-if="imageBody.url" :src="imageBody.url" /> | ||
|
||
<template #footer> | ||
<span class="dialog-footer"> | ||
<el-button @click="visible = false">取消</el-button> | ||
<el-button type="primary" @click="onSend"> 发送 </el-button> | ||
</span> | ||
</template> | ||
</ElDialog> | ||
</template> | ||
|
||
<style lang="scss" src="./styles.scss" /> |
19 changes: 19 additions & 0 deletions
19
src/views/Home/components/ChatBox/PasteImageDialog/styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
.image-paste-modal { | ||
display: flex; | ||
flex-direction: column; | ||
width: 600px; | ||
max-height: 80vh; | ||
overflow: hidden; | ||
text-align: center; | ||
|
||
.el-dialog__body { | ||
flex: 1; | ||
max-height: 100%; | ||
overflow-y: auto; | ||
} | ||
|
||
img { | ||
max-width: 100%; | ||
max-height: 100%; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters