使用 qrcode 生成二维码

一、下载插件 qrcode 插件

1
npm install qrcode --save

二、在 main.js 中引用

1
2
import QRCode from "qrcode";
Vue.use(QRCode);

三、组件中引入 QRCode

点我展示代码 
1
2
3
4
5
<template>
    <div>
        <div id="qrcode"></div>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    <script>
      import QRCode from 'qrcode';
      mounted(){
          this.CreateQrcode();
      },
      method:{
          setTimeout(() => {
              // 获取DOM节点
              let dom = document.getElementById('qrcode);
              // 路由传参
              const res = this.$route.params;
              const lbsid = res.id;
              // 二维码包含的URL 需要将URL和id做一下字符串的拼接
              let url = 'http://*********';
              let URL = url.concat(lbsid);
              let qrCode = new QRCode(dom,{
                  width:260, // 图像宽度
                  height:260,  // 图像高度
                  colorDark:"#000000",  // 前景色
                  colorLight:"#ffffff", // 背景色
                  correctLevel: QRCode.CorrectLevel.H  // 容错等级
              });
              qrCode.clear();
              qrCode.makeCode(URL);
          },100)
      }
    </script>
    <style lang="less" scoped>
        #qrcode {
            display: inline-block;
            margin-top: 6rem;
            img {
                width: 60%;
                height: 60%;
                background-color: #fff; //设置白色背景色
                padding: 6px; // 利用padding的特性，挤出白边
  }
}
    </style>