vue生成相机可导入二维码名片

1. 引入二维码绘制插件

import QRCode from 'qrcodejs2';

2. 展示页面

<div style="width: 100%;height: 150px;margin-bottom: 20px;"> <div style="width: 50%;height: 100%;float: left;" class="qrCode" ref="qrCodeDiv"></div> <div style="width: 50%;height: 100%;float: left;"> <span style="margin-top: 20px;">微信扫一扫，快速拨打电话</span> <span style="margin-top: 20px;">会员姓名{{ userInfo.realName }}</span> <span style="margin-top: 20px;">手机号码{{ userInfo.phone }}</span> </div> </div>

3. 创建二维码绘制函数加号后内容替换为真实内容即可，不需要的内容删除掉

例：

​ content += "\r\nFN:" + userInfo.realName;//姓名 ​

bindQRCode: function() { let content = "BEGIN:VCARD\r\nVERSION:3.0"; content += "\r\nN:" + '李;四;;;';//姓 （N/FN二选一） content += "\r\nFN:" + '姓名';//姓名 content += "\r\nTEL:" + '15555555555';// 手机号 content += "\r\nORG:" + '示例公司';// 公司 content += "\r\nTITLE:" + '软件工程师';// 职称 content += "\r\nPHOTO;ENCODING=b:" + '头像src';// 头像src content += "\r\nTEL;TYPE=WORK,VOICE:" + '工作电话';// 工作电话 content += "\r\nTEL;TYPE=CELL,VOICE:" + '手机';// 手机 content += "\r\nADR;TYPE=WORK:" + '详细地址';// 详细地址 content += "\r\nEMAIL;TYPE=WORK:" + '邮箱';// 邮箱 content += "\r\nURL:" + '主页url';// 主页 content += "\r\nNOTE:" + '备注';// 备注 content += "\r\nBDAY:" + '生日';// 生日 content += "\r\nAGENT;VALUE=uri:" + 'someone@example.com';// 代理人 content += "\r\nPHOTO;ENCODING=b;TYPE=JPEG:" + "头像src.jpg";// 头像地址，格式为jpg content += "\r\nEND:VCARD"; new QRCode(this.$refs.qrCodeDiv, { text: content, width: 200, height: 200, colorDark: "#333333", //二维码颜色 colorLight: "#ffffff", //二维码背景色 correctLevel: QRCode.CorrectLevel.L //容错率，L/M/Q/H }) },