【Vue 实战】 生成二维码

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前言

今天分享下，在vue项目中生成二维码的一种方法

---

二、实战步骤

1. 安装依赖

• Vue 2.x版本中用版本1.x
• Vue 3.x版本中用3.x

//npm
npm install qrcode.vue  

//yarn 
yarn add qrcode.vue    
1
2
3
4
5

2. 引入到需要使用的页面

代码如下（示例）：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

---

三、插件参数

1. value (二维码的值内容)

类型: string | 默认值: " "

2. size (二维码元素的大小)

类型: number | 默认值: 100

3. render-as

类型：string(‘canvas’ | ‘svg’)
默认值：canvas
生成二维码为canvas或svg。该道具svg可以在 SSR 上工作。

4. margin

类型：number
默认值：0
定义安静区的宽度。

4. background （二维码的背景颜色）

类型：string
默认值： #ffffff

5. foreground （二维码的前景色）

类型：string
默认值：#000000

6. class （二维码元素的类名）

类型：string
默认值：" "

7. level

类型：string(‘L’ | ‘M’ | ‘Q’ | ‘H’)
默认值：H
qrcode 纠错级别（“L”、“M”、“Q”、“H”之一）。

---