QRCode 二维码

能够将链接转换生成二维码的组件。

基础用法

设置link属性，生成链接的二维码。

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

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

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

二维码尺寸

设置size属性，自定义二维码大小，单位为 px。设置padding属性，自定义空白区域大小。

<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>

自定义颜色

通过dark-color和light-color属性，自定义二维码颜色。

注意：仅支持十六进制颜色，例如 dark-color="red" 是不被支持的。

<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-level 调整不同的容错等级。

L(Low)容错率为 7% 左右
M(Medium)容错率为 15% 左右
Q(Quartile)容错率为 25% 左右
H(High)容错率为 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

属性

名称	描述	类型	默认值	必填
link	扫描后的地址	string		是
size	二维码尺寸	number	120	否
padding	二维码白边区域大小	number	3	否
dark-color	二维码颜色	string	#000	否
light-color	二维码背景色	string	#fff	否

QRCode 二维码 #

基础用法 #

二维码尺寸 #

自定义颜色 #

纠错比例 #

API #

属性 #

QRCode 二维码

基础用法

二维码尺寸

自定义颜色

纠错比例

API

属性