Qrcode QR Code Component

Generates and displays a QR code on the front end using JS based on the provided string

📌Platform Differences

APP(vue)	H5	WeChat Mini Program	Alipay Mini Program
✔	✔	✔	✔

⚠️Notes

Notes

• The QR code is generated by front-end JS computation, so there will be a computation time
• If there are multiple QR code components on a page, you must set different cid properties for each
• The icon property supports image URLs, but it is recommended to use smaller-sized images to ensure the QR code remains scannable
• The error correction level lv ranges from 1 to 4; the larger the number, the stronger the error correction capability

🏯Basic Usage Examples

Basic Usage

<template>
    <hy-qrcode text="https://gxh151.top"></hy-qrcode>
</template>

Custom Size

<template>
    <hy-qrcode text="https://gxh151.top" :size="300"></hy-qrcode>
</template>

Custom Colors

<template>
    <hy-qrcode
        text="https://gxh151.top"
        background="#f5f5f5"
        foreground="#214283"
        pdGround="#214283"
    ></hy-qrcode>
</template>

Add a Center Icon

<template>
    <hy-qrcode
        text="https://gxh151.top"
        icon="https://pic1.imgdb.cn/item/67628833d0e0a243d4e5d22b.webp"
        :iconSize="50"
    ></hy-qrcode>
</template>

Custom Loading State

<template>
    <hy-qrcode text="https://gxh151.top" :showLoading="true" loadingText="Generating..."></hy-qrcode>
</template>

Disable Loading State

<template>
    <hy-qrcode text="https://gxh151.top" :showLoading="false"></hy-qrcode>
</template>

Multiple QR Codes

<template>
    <view class="qrcode-list">
        <hy-qrcode cid="qrcode1" text="https://example.com/1"></hy-qrcode>
        <hy-qrcode cid="qrcode2" text="https://example.com/2"></hy-qrcode>
        <hy-qrcode cid="qrcode3" text="https://example.com/3"></hy-qrcode>
    </view>
</template>

<style lang="scss" scoped>
    .qrcode-list {
        display: flex;
        flex-direction: column;
        gap: 20rpx;
    }
</style>

Enable Preview

<template>
    <hy-qrcode text="https://gxh151.top" :allowPreview="true" @preview="onPreview"></hy-qrcode>
</template>

<script setup>
    const onPreview = (url, event) => {
        console.log('Preview image:', url);
    };
</script>

Listen to Generation Events

<template>
    <hy-qrcode text="https://gxh151.top" @result="onResult" @longPress="onLongPress"></hy-qrcode>
</template>

<script setup>
    const onResult = (res) => {
        console.log('QR code generated successfully:', res);
    };

    const onLongPress = () => {
        console.log('QR code long pressed');
    };
</script>

API

Qrcode Props

Parameter	Description	Type	Default Value
cid	Instance ID string (if there are multiple QR code components, each must have a unique cid)	string	'hy-qrcode-canvas_' + random(1, 1000)
size	QR code size, default unit is px	number	200
text	QR code content	string	-
show	Whether to display the QR code	boolean	true
background	QR code background color	string	#ffffff
foreground	QR code color	string	#000000
pdGround	Positioning corner color	string	#000000
lv	Error correction level (1-4)	number	3
usingComponents	Whether it is a custom component	boolean	true
icon	QR code center icon (image URL)	string	-
iconSize	QR code center icon size (px)	number	40
showLoading	Whether to show loading state	boolean	true
loadingText	Loading prompt text	string	Generating QR code
allowPreview	Whether to allow image preview	boolean	false

Events

Event Name	Description	Callback Parameters
result	QR code generated successfully	res: any data returned on success
preview	Open image event	url: string image URL, event: Event event object
longPress	QR code long press event	-

03:29