SwQrcodeScanner

SwQrcodeScanner 提供圖片上傳 → 二維碼識別能力。點擊區域觸發系統檔案選擇器，選取圖片後在瀏覽器端完成解碼，識別成功後在原位置展示圖片預覽。

UI 完全可自訂：trigger slot 替換預設「+」圖示，preview slot 替換預設預覽圖，兩者均支援作用域插槽。

基礎用法

點擊虛線框選擇含二維碼的圖片，識別成功後圖片預覽替換「+」圖示，仍可點擊重新上傳。

加载中...

透過 trigger slot 替換預設「+」圖示。Slot scope 暴露 loading（解碼中）/ hasResult（已有結果）等狀態。

加载中...

透過 preview slot 替換識別成功後的預設圖片預覽。Slot scope 暴露 result（解碼文字）和 url（圖片記憶體 URL）。

加载中...

error 事件攜帶 code 欄位，可根據不同錯誤碼做差異化提示；complete 事件在 success / error 之後必發。

加载中...

名稱	類型	必填	預設值	說明
`width`	`number \| string`	❌	`'8rem'`	容器寬度；數字按 px 處理
`height`	`number \| string`	❌	`'8rem'`	容器高度；數字按 px 處理
`iconSize`	`number \| string`	❌	`32`	預設「+」圖示尺寸；數字按 px 處理
`iconColor`	`string`	❌	`'var(--primary)'`	預設「+」圖示顏色
`accept`	`string`	❌	`'image/png,image/jpeg,image/webp,image/gif,image/bmp'`	允許上傳的 MIME 類型白名單（逗號分隔）
`maxSize`	`number`	❌	`10485760`（10MB）	單一檔案最大位元組數，超出觸發 `FILE_TOO_LARGE` 錯誤
`ariaLabel`	`string`	❌	`'选择图片识别二维码'`	透明 input 的無障礙標籤
`decodeTimeout`	`number`	❌	`8000`	解碼逾時（ms）。`vue-qrcode-reader@5.x` 對非二維碼圖片靜默 reject，此 timeout 兜底發 `error(NO_QRCODE)` + `complete`，避免業務 loading 永掛

CSS 變數（可在父層直接覆蓋，無需傳 prop）：

插槽名	Scope	預設內容	說明
`trigger`	`{ hasResult, result, url, loading }`	內建「+」SVG	始終渲染，用於自訂上傳引導 UI
`preview`	`{ result: string, url: string }`	`<img>`	識別成功後渲染，覆蓋在 trigger 之上

事件名	Payload	觸發時機
`start`	—	檔案通過驗證、URL 已建、解碼前
`success`	`{ result: string, url: string, allResults: string[] }`	至少識別到一個二維碼
`error`	`{ message: string, code: 'NO_QRCODE' \| 'INVALID_FORMAT' \| 'FILE_TOO_LARGE' \| 'DECODE_ERROR' }`	驗證或識別失敗
`complete`	—	`success` 或 `error` 之後必發

方法	說明
`reset()`	清除已有結果並撤銷圖片記憶體 URL，恢復初始「+」狀態

檔案 MIME 二次校驗：瀏覽器的 accept 屬性可被繞過，元件在 change 事件處理中會再次檢查 file.type，不符直接 error(INVALID_FORMAT)。
記憶體管理：圖片記憶體 URL 透過 URL.createObjectURL 建立，元件在重新上傳 / reset() / 解除安裝時均會自動 URL.revokeObjectURL，無需手動釋放。
層級原理：透明 QrcodeCapture 始終覆蓋在最上層，確保在有預覽圖的狀態下點擊仍能重新選擇檔案。
decodeTimeout 兜底：upstream vue-qrcode-reader@5.x QrcodeCapture 內部對非二維碼圖片的 decode promise 靜默 reject（無 @error 事件），導致 @detect 永不觸發 → 業務側 loading 狀態機一直轉。元件預設 8s 逾時後自動 emit error({ code: 'NO_QRCODE' }) + complete，業務無需自己加 setTimeout。慢網路 / 大圖場景可調高 decodeTimeout。