fix: 修复弹窗交互问题和拖放上传UI重复显示
问题描述: 1. 弹窗点击外部关闭时,选择文本拖动鼠标到窗口外会误触关闭 2. 拖放文件上传的提示UI重复显示了两次 修复内容: 【弹窗交互优化】 - 将所有模态框的 @click 事件改为 @mousedown.self + @mouseup.self 组合 - 新增 handleModalMouseDown 和 handleModalMouseUp 方法 - 只有在同一个overlay元素上按下和释放鼠标时才关闭弹窗 - 解决了选择文本时拖动鼠标导致弹窗意外关闭的问题 - 受影响的弹窗: * 重命名文件弹窗 * 分享所有文件弹窗 * 分享单个文件弹窗 * 忘记密码弹窗 * 文件审查弹窗 * 编辑存储权限弹窗 【拖放UI修复】 - 删除了重复的拖放上传提示层(原第670-677行) - 保留文件列表区域内的拖放提示层(第711-718行) - 现在拖放上传提示只显示一次 技术改进: - mousedown.self: 只在overlay本身被按下时触发 - mouseup.self: 只在overlay本身被释放时触发 - 记录mousedown的目标,只有目标一致才执行关闭 - 提升了用户体验,避免误操作 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -86,6 +86,7 @@ createApp({
|
||||
totalBytes: 0,
|
||||
uploadingFileName: '',
|
||||
isDragging: false,
|
||||
modalMouseDownTarget: null, // 模态框鼠标按下的目标
|
||||
|
||||
// 上传工具下载
|
||||
downloadingTool: false,
|
||||
@@ -211,6 +212,23 @@ createApp({
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 模态框点击外部关闭优化 - 防止拖动选择文本时误关闭
|
||||
modalMouseDownTarget: null,
|
||||
handleModalMouseDown(e) {
|
||||
// 记录鼠标按下时的目标
|
||||
this.modalMouseDownTarget = e.target;
|
||||
},
|
||||
handleModalMouseUp(modalName) {
|
||||
// 只有在同一个overlay元素上按下和释放鼠标时才关闭
|
||||
return (e) => {
|
||||
if (e.target === this.modalMouseDownTarget) {
|
||||
this[modalName] = false;
|
||||
this.shareResult = null; // 重置分享结果
|
||||
}
|
||||
this.modalMouseDownTarget = null;
|
||||
};
|
||||
},
|
||||
|
||||
// 格式化文件大小
|
||||
formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
|
||||
Reference in New Issue
Block a user