官网地址:QrCode官网
第一步:安装
npm install --save qrcode.vue
第二步:引入并注册
import QrcodeVue from 'qrcode.vue'
export default defineComponent({
components: {
QrcodeVue,
},
setup() {
const codeUrl = ref("2222");
const size = ref<string>("180");
return {
codeUrl,
size,
};
},
});
第三步:使用
<qrcode-vue :value="codeUrl" :size="size" level="H" />
效果图:
组件属性:
-
value
类型:string
默认值:’’
二维码的内容值。 -
size
类型:number
默认值:100
二维码大小。 -
render-as
类型:string('canvas' | 'svg')
默认值:canvas
生成二维码的 HTML 标签,可选 canvas 或 svg。其中 svg 可以用于 SSR。 -
margin
类型:number
默认值:0
定义空白区的宽度应该是多少。 -
level
类型:string('L' | 'M' | 'Q' | 'H')
默认值:H
二维码的容错能力等级,取值为 ‘L’, ‘M’, ‘Q’, ‘H’ 之一。 -
background
类型:string
默认值:#ffffff
二维码背景颜色。 -
foreground
类型:string
默认值:#000000
二维码前景颜色。 -
class
类型:string
默认值:’’
传递给二维码根元素的类名。