position: fixed 是实现右下角悬浮球的唯一可靠方式，需设 right: 20px、bottom: 20px、z-index: 9999，隐藏 file input 应用 opacity: 0 + absolute 定位并确保 click() 同步调用，ios 需注意 notallowederror 和文件静默截断。
用 position: fixed 定位到右下角
悬浮球本质是脱离文档流的固定定位元素，position: fixed 是唯一可靠选择——它不随滚动偏移，且相对于视口定位。绝对定位（position: absolute）在滚动时会“跟丢”，尤其页面内容高度变化时更不稳定。
关键样式必须包含：right: 20px、bottom: 20px、z-index: 9999（确保压住其他内容）。不要用 left 或 top 配合计算，容易受缩放或响应式干扰。
- 避免设
width/height为百分比，固定像素（如64px）更可控 - 加
transform: translateZ(0)可触发硬件加速，减少悬停动画卡顿 - 移动端需额外加
touch-action: manipulation提升点击响应
上传功能必须用 <input type="file"> 隐藏后触发
浏览器禁止 JS 直接调用文件选择器，也不能给 <input type="file"> 设置 value。唯一合规方式是：视觉上隐藏原生 input，用按钮（或球体）点击时调用其 click() 方法。
常见错误是把 display: none 或 visibility: hidden 直接加在 input 上——这会导致 click() 失效。正确做法是用 opacity: 0 + position: absolute 覆盖在按钮上，或用 clip-path 裁剪。
- input 必须和悬浮球 DOM 同级或父级，否则
click()在部分 iOS 版本中静默失败 - 监听
change事件而非click，因为用户可能取消选择，此时无文件但已触发 click - 加
accept属性（如accept=".pdf,.docx"）能过滤文件类型，但不能替代后端校验
球体交互要处理 :hover 和点击反馈
纯 CSS 悬浮效果足够，不需要 JS 监听 mouseenter。用 :hover 改变背景色、阴影或 scale 即可，但要注意移动端没有 hover 状态，得补 :active。
点击后如果没反应，大概率是 input 的 click() 被阻止了——检查是否用了 event.preventDefault() 在球体上，或者父容器有 pointer-events: none。
- 球体推荐用
border-radius: 50%+box-shadow实现立体感，避免用图片 - 加
cursor: pointer明确提示可点击，否则部分用户不会尝试悬停 - 上传中状态建议用
disabled禁用球体，并临时替换图标（如旋转 SVG），防止重复点击
兼容性坑：iOS Safari 的 click() 限制和文件大小
iOS Safari 对非用户手势触发的 click() 严格限制——必须是 touchend 或 click 事件回调内同步调用，异步（如 setTimeout、Promise.then）会直接报错 NotAllowedError。
另外，iOS 默认对单个文件上传大小有限制（通常 10MB 左右），超限时 change 事件根本不会触发，也不会报错，只会静默失败。必须在 change 回调里立刻检查 input.files.length 和 input.files[0].size。
- 不要用
label包裹 input 并设for，iOS 下 label 点击有时不触发选择器 - 真机测试必做：模拟弱网、低电量模式，Safari 可能提前终止大文件读取
- 上传前用
FileReader读取小文件预览时，注意readAsDataURL会内存爆炸，优先用readAsArrayBuffer
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
