SwQrcodeScanner

SwQrcodeScanner provides image upload → QR code recognition in the browser. Clicking the component opens the system file picker; after an image is selected, the QR code is decoded client-side. On success the image preview replaces the default「+」icon in-place.

Both the trigger UI and the preview area are fully customizable via scoped slots.

Basic Usage

Click the dashed box to select an image containing a QR code. On success, the image preview appears and can be clicked again to re-upload.

加载中...

Custom Trigger UI

Use the trigger slot to replace the default「+」icon. The slot scope exposes loading, hasResult, result, and url for building custom upload UIs.

加载中...

Custom Preview Area

Use the preview slot to replace the default image preview shown after a successful scan. The slot scope exposes result (decoded string) and url (object URL of the image).

加载中...

Error Handling

The error event carries a code field to differentiate failure types. The complete event fires after every success or error, making it a reliable hook for hiding loading indicators.

加载中...

Props

Name	Type	Required	Default	Description
`width`	`number \| string`	❌	`'8rem'`	Container width; numbers are treated as px
`height`	`number \| string`	❌	`'8rem'`	Container height; numbers are treated as px
`iconSize`	`number \| string`	❌	`32`	Default「+」icon size; numbers are treated as px
`iconColor`	`string`	❌	`'var(--primary)'`	Default「+」icon color
`accept`	`string`	❌	`'image/png,image/jpeg,image/webp,image/gif,image/bmp'`	Allowed MIME types (comma-separated)
`maxSize`	`number`	❌	`10485760` (10 MB)	Max file size in bytes; triggers `FILE_TOO_LARGE`
`ariaLabel`	`string`	❌	`'选择图片识别二维码'`	`aria-label` for the hidden file input
`decodeTimeout`	`number`	❌	`8000`	Decode timeout (ms). `vue-qrcode-reader@5.x` silently rejects non-QR images (no `@error` event); this timeout falls back to `error(NO_QRCODE)` + `complete` so business loading state doesn't hang forever

CSS variables (override them on any ancestor — no prop needed):

Variable	Default	Description
`--sw-qrcode-scanner-width`	`8rem`	Scan area width
`--sw-qrcode-scanner-height`	`8rem`	Scan area height
`--sw-qrcode-scanner-icon-size`	`2rem`	Center icon size
`--sw-qrcode-scanner-icon-color`	`var(--primary)`	Center icon color

Slots

Name	Scope	Default	Description
`trigger`	`{ hasResult, result, url, loading }`	Built-in「+」 SVG	Always rendered; use it to customize the upload UI
`preview`	`{ result: string, url: string }`	`<img>`	Rendered on success, overlaid above trigger

Events

Event	Payload	When
`start`	—	File passed validation, URL created, before decoding
`success`	`{ result: string, url: string, allResults: string[] }`	At least one QR code detected
`error`	`{ message: string, code: 'NO_QRCODE' \| 'INVALID_FORMAT' \| 'FILE_TOO_LARGE' \| 'DECODE_ERROR' }`	Validation or decoding failed
`complete`	—	After every `success` or `error`

success.result is the first decoded value; success.allResults is the full array (length 1 for single-code images).

Exposed Methods

Method	Description
`reset()`	Clear state and revoke the object URL, restoring the「+」state

Notes

Double MIME validation: The browser's accept attribute can be bypassed. The component re-checks file.type on every change event and fires error(INVALID_FORMAT) if the type is not allowed.
Memory management: Object URLs are automatically revoked on re-upload, reset(), and component unmount.
Layer mechanism: The transparent QrcodeCapture always sits on the topmost layer, ensuring a click on the preview image still opens the file picker.
decodeTimeout fallback: upstream vue-qrcode-reader@5.x QrcodeCapture silently rejects decode promise for non-QR images (no @error event), so @detect never fires → business loading state hangs forever. Component auto-emits error({ code: 'NO_QRCODE' }) + complete after the default 8s timeout, no need to add setTimeout in business code. Raise decodeTimeout for slow networks / large images.