qrcode.vue 到 3.x;
🔒 如果你正在使用 Vue 2，请保持 qrcode.vue 的版本为 1.x;
一款 Vue.js 二维码组件，同时支持 Vue 2 和 Vue 3.
快速添加 qrcode.vue 组件到项目中
npm install --save qrcode.vue # yarn add qrcode.vuedist/
|--- qrcode.vue.cjs.js // CommonJS
|--- qrcode.vue.esm.js // ES module
|--- qrcode.vue.browser.js // UMD for browser or require.js or CommonJS
|--- qrcode.vue.browser.min.js // UMD Minimum size
e.g.
import { createApp } from 'vue'
import QrcodeVue from 'qrcode.vue'
createApp({
data: {
value: 'https://example.com',
},
template: '<qrcode-vue :value="value"></qrcode-vue>',
components: {
QrcodeVue,
},
}).mount('#root')或者，在独有单文件扩展 *.vue 中使用：
<template>
<qrcode-vue :value="value" :size="size" level="H" />
</template>
<script>
import QrcodeVue from 'qrcode.vue'
export default {
data() {
return {
value: 'https://example.com',
size: 300,
}
},
components: {
QrcodeVue,
},
}
</script>在 Vue 3 中配合 TypeScript 使用：
<template>
<qrcode-vue :value="value" :level="level" :render-as="renderAs" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import QrcodeVue from 'qrcode.vue'
import type { Level, RenderAs } from 'qrcode.vue'
const value = ref<String>('qrcode')
const level = ref<Level>('M')
const renderAs = ref<RenderAs>('svg')
</script>- 类型：
string - 默认值：
''
二维码的内容值。
- 类型：
number - 默认值：
100
二维码大小。
- 类型：
RenderAs('canvas' | 'svg') - 默认值：
canvas
生成二维码的 HTML 标签，可选 canvas 或 svg。其中 svg 可以用于 SSR。
- 类型：
number - 默认值：
0
定义空白区的宽度应该是多少。
- 类型：
Level('L' | 'M' | 'Q' | 'H') - 默认值：
H
二维码的容错能力等级，取值为 'L', 'M', 'Q', 'H' 之一。了解更多，维基百科：QR_code。
- 类型：
string - 默认值：
#ffffff
二维码背景颜色。
- 类型：
string - 默认值：
#000000
二维码前景颜色。
- 类型：
string - 默认值：
''
传递给二维码根元素的类名。
copyright © 2021 scopewu, license by MIT