阳光沙滩
让学习编程变得简单
Vue.Js/nuxt.js如何生成二维码?
发表于 2020-05-04    阅读次数 223

Vue.Js如何生成二维码?

vue.js的本质还是js嘛!

所以,有个库就好!

一个调用,二维码就出来了。

安装以来酷

npm install qrcodejs2 --save

使用的页面引入

import QRCode from 'qrcodejs2';

创建一个方法,适当的时候触发即可

挖一个坑

 <div id="qrCodeContainer" ref="qrCodeContainer"></div>
methods: {
      createQrCode() {
        new QRCode(this.$refs.qrCodeContainer, {
          text: 'xxx',
          width: 150,
          height: 150,
          colorDark: "#666666", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率,L/M/H
        })
      }
    }

Nuxt.js生成二维码

引用

https://cdn.sunofbeaches.com/qrcodejs/qrcode.min.js

可以保存一份到自己的服务器里去。

在head里

添加

 script: [
   	.....
      {
        src: 'https://cdn.sunofbeaches.com/qrcodejs/qrcode.min.js'
      }
	......
    ],
    __dangerouslyDisableSanitizers: ['script']//不会对&quot;...这些字符做转义了

以上可以单页面引入,也可以全局引入.

然后创建二维码码

 let qrCodeContainer = document.getElementById('moment-detail-qrcode');
        qrCodeContainer.innerHTML = '';
        //console.log(qrCodeContainer);
        //console.log('set up qr code...');
        let qrcode = new QRCode(qrCodeContainer, {
          width: 150,//设置宽高
          height: 150
        });
        qrcode.makeCode('https://www.sunofbeach.net/m/' + momentId);

这样子,二维码码就创建到对应的坑里了。