vue3 使用QrCode生成二维码

官网地址：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
  默认值：’’
  传递给二维码根元素的类名。