QRCode

A component that converts links to generate QR codes.

Basic usage

Set the link property to generate the linked QR code.

<template>
    <div>
        <kl-qrcode link="https://juejin.cn/"></kl-qrcode>
    </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped></style>

QRCode size

Set size property to customize the size of QR code, in unit px. Set the padding property to customize the size of the white space.

<template>
    <div>
        <div class="btns">
            <kl-button @click="() => (size -= 10)">size sub</kl-button>
            <kl-button @click="() => (size += 10)">size add</kl-button>
            <kl-button @click="() => (padding -= 1)">padding sub</kl-button>
            <kl-button @click="() => (padding += 1)">padding add</kl-button>
        </div>
        <kl-qrcode link="https://juejin.cn/" :size="size" :padding="padding"></kl-qrcode>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const size = ref(120)
const padding = ref(3)
</script>

<style lang="scss" scoped>
.btns {
    margin-bottom: 10px;
}
</style>

Custom color

Customize the color of QR code through the dark-color and light-color properties.

Note: Only hexadecimal colors are supported. For example, dark-color="red" is not supported.

<template>
    <div class="color-demo">
        <kl-qrcode link="https://juejin.cn/" dark-color="#3a7afe" light-color="#f3f3f3"></kl-qrcode>
        <kl-qrcode link="https://juejin.cn/" dark-color="#67c23a" light-color="#f3f3f3"></kl-qrcode>
        <kl-qrcode link="https://juejin.cn/" dark-color="#e6a23c" light-color="#f3f3f3"></kl-qrcode>
        <kl-qrcode link="https://juejin.cn/" dark-color="#f56c6c" light-color="#f3f3f3"></kl-qrcode>
    </div>
</template>

<script lang="ts" setup></script>

<style lang="scss" scoped>
.color-demo {
    display: flex;
    justify-content: space-between;
}
</style>

Error correction ratio

Adjust different fault tolerance levels by setting error-level.

The fault tolerance rate of L(Low) is about 7%
The fault tolerance rate of M(Medium) is about 15%
The fault tolerance rate of Q(Quartile) is about 25%
The fault tolerance rate of H(High) is about 30%

<template>
    <div>
        <div class="btns">
            <kl-button @click="changeErrorLevel('L')">L</kl-button>
            <kl-button @click="changeErrorLevel('M')">M</kl-button>
            <kl-button @click="changeErrorLevel('Q')">Q</kl-button>
            <kl-button @click="changeErrorLevel('H')">H</kl-button>
        </div>
        <kl-qrcode link="https://juejin.cn/" :error-level="errorLevel"></kl-qrcode>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const errorLevel = ref<string>('L')
const changeErrorLevel = (level: 'L' | 'M' | 'Q' | 'H') => {
    errorLevel.value = level
}
</script>

<style lang="scss" scoped>
.btns {
    margin-bottom: 10px;
}
</style>

API

Attribute

name	description	type	default value	required
link	The scanned address	string		yes
size	The qrcode size	number	120	no
padding	Size of the white margin area of the qrcode	number	3	no
dark-color	The qrcode color	string	#000	no
light-color	The qrcode background color	string	#fff	no

QRCode #

Basic usage #

QRCode size #

Custom color #

Error correction ratio #

API #

Attribute #