安装qrcode包

npm i qrcode -S

使用到的页面或组件引入

import QRCode from 'qrcode'

template模板

 <div class="qrcode" ref="qrcode_area">
     <canvas ref="qrCodeUrl" id="canvas"></canvas>
</div>

methods方法

/** 创建二维码 */
createQRCode(url) {
 this.$nextTick(() = >{
    //获取父的高度，适配设备宽高
    let height = this.$refs.qrcode_area.clientHeight let options = {
    	width: height,
    	height: height,
    	margin: 2
    }
    const canvas = this.$refs.qrCodeUrl QRCode.toCanvas(canvas, url, options, (error) = >{})
	})
    //转成base64图片展示在页面，并且处理base64字符，支持微信内长按识别保存
    //this.imgUrl = canvas.toDataURL('image/png').replace(/(\r\n)|(\n)|(\r)/g, "");
},
/** 保存二维码 */
saveQrcode() {
  let canvas = document.querySelector('canvas');
  // 构造url
  let url = canvas.toDataURL('image/png');
  const link = document.createElement("a");
  link.setAttribute("download", "");
  link.setAttribute("href", url);
  link.click();
  if (document.body.contains(link)) {
      document.body ? .removeChild(link);
  }
},

备注

1. qrcode本身不支持圆角。 可以设置二维码得到容器溢出隐藏，然后设置border-radius。 但是实际保存下来的还是直角的图
2. 移动端自适应，获取父的宽高作为生成二维码的宽高。
3. 在微信内如果需要长按识别保存，需要先转成base64，并且做字符处理。