vue-cli 项目下生成二维码

使用 qrcodejs2

首先：

npm install --save qrcodejs2
复制代码

然后在需要生成的相关页面：

    import QRCode from 'qrcodejs2' 
 
    methods:{
        // 动态生成二维码
	   qrcode () {  
               let qrcode = new QRCode('qrcode', {
			        width: 200, // 设置宽度，单位像素
			        height: 200, // 设置高度，单位像素
			        text: 'https://www.baidu.com'   // 设置二维码内容或跳转地址
                              })
		}  
	},
	created () {
		this.$nextTick(() => {
			this.qrcode()
		})
	}
复制代码

html:

<template>
  <div id="query">
    <h1>二维码：</h1>
   <div id="qrcode" ref="qrcode"></div>
  </div>
</template>
复制代码

需要注意的点

 在created里面调用的时候，要放在 this.$nextTick 回调函数里面调用，不然会报错误：
Error in created hook: "TypeError: Cannot read property 'appendChild' of null"
复制代码

转载于:https://juejin.im/post/5c760ab7f265da2da00ebee2