QRCode 二维码

代码演示

基础用法

<template>
    <a-space
        :size="24"
        direction="vertical">
        <x-qrcode :value="text"></x-qrcode>
        <a-input
            v-model:value="text"
            :maxlength="60"
            placeholder="-" />
    </a-space>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('http://xy-admin.xuanyunet.com')
</script>

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

带 Icon

<template>
    <x-qrcode
        :icon="assets('logo.svg')"
        :value="text"
        icon-background-color="#fff"></x-qrcode>
</template>

<script setup>
import { ref } from 'vue'
import { assets } from '@/utils'

const text = ref('http://xy-admin.xuanyunet.com')
</script>

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

不同的状态

<template>
    <a-space :size="24">
        <x-qrcode
            :value="text"
            status="loading"></x-qrcode>
        <x-qrcode
            :value="text"
            status="expired"
            @refresh="handleRefresh"></x-qrcode>
        <x-qrcode
            :value="text"
            status="scanned"></x-qrcode>
    </a-space>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'

const text = ref('http://xy-admin.xuanyunet.com')

function handleRefresh() {
    message.success('已刷新')
}
</script>

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

自定义尺寸

<template>
    <a-space
        :size="24"
        direction="vertical">
        <a-button-group>
            <a-button @click="handleDecline">
                <template #icon>
                    <MinusOutlined />
                </template>
                small
            </a-button>
            <a-button @click="handleIncrease">
                <template #icon>
                    <PlusOutlined />
                </template>
                large
            </a-button>
        </a-button-group>

        <x-qrcode
            :icon="assets('logo.svg')"
            :size="size"
            :value="text"
            icon-background-color="#fff"></x-qrcode>
    </a-space>
</template>

<script setup>
import { ref } from 'vue'
import { assets } from '@/utils'
import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue'

const text = ref('http://xy-admin.xuanyunet.com')
const size = ref(160)

function handleDecline() {
    size.value = size.value - 10
    if (size.value < 48) {
        size.value = 48
    }
}

function handleIncrease() {
    size.value = size.value + 10
    if (size.value > 300) {
        size.value = 300
    }
}
</script>

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

自定义颜色

<template>
    <a-space :size="24">
        <x-qrcode
            :value="text"
            color="#72c240"></x-qrcode>
        <x-qrcode
            :value="text"
            color="#3875f7"></x-qrcode>
    </a-space>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('http://xy-admin.xuanyunet.com')
</script>

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

下载二维码

<template>
    <a-space
        :size="24"
        direction="vertical">
        <x-qrcode
            ref="qrcodeCanvasRef"
            :value="text"></x-qrcode>
        <a-button
            type="primary"
            @click="handleDownload">
            Downlaod
        </a-button>
    </a-space>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('http://xy-admin.xuanyunet.com')

const qrcodeCanvasRef = ref()

async function handleDownload() {
    const url = await qrcodeCanvasRef.value.toDataURL()
    const a = document.createElement('a')
    a.download = 'QRCode.png'
    a.href = url
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
}
</script>

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

纠错比例

<template>
    <a-space
        :size="24"
        direction="vertical">
        <x-qrcode
            :error-level="level"
            :value="text"></x-qrcode>
        <a-segmented
            v-model:value="level"
            :options="segmentedData" />
    </a-space>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('http://xy-admin.xuanyunet.com')
const segmentedData = ['L', 'M', 'Q', 'H']
const level = ref(segmentedData[0])
</script>

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

高级用法

<template>
    <a-popover :overlay-inner-style="{ padding: 0 }">
        <template #content>
            <x-qrcode
                :bordered="false"
                :value="text" />
        </template>
        <img
            :src="assets('logo.svg')"
            height="100"
            width="100" />
    </a-popover>
</template>

<script setup>
import { ref } from 'vue'
import { assets } from '@/utils'

const text = ref('http://xy-admin.xuanyunet.com')
</script>

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

API

Props

名称	说明	类型	默认值
value	二维码内容	string	-
bordered	边框	boolean	true
size	大小	number	160
color	颜色	string	#000000
background-color	背景色	string	#ffffff
icon	icon url	string	-
icon-size	icon 尺寸	number	40
icon-padding	icon 内间距	number	0
icon-background-color	icon 背景色	string	-
error-level	容错级别，可选：【L=low, M=medium, Q=quartile, H=high】	string	M
status	状态，可选：【active=有效，loading=加载中，expired=已过期，scanned=已扫描】	string	active
margin	安全区宽度	number	12

Events

事件名	说明	回调参数
initialized	初始化	instance
refresh	点击刷新的回调	-

Methods

名称	说明	返回值
toDataURL	获取 data URI	Promise