vue根据链接生成二维码 qrcode js
需求：后端返回一个完整链接，前端根据链接生成一个二维码
1、安装qrcode插件
npm install qrcode
2、引入qrcode,并且使用完整代码
<template>
<div><img :src="qrcodeData" class="qrcode-image" />
</div>
</template>
<script>
import QRCode from 'qrcode'; // 引入生成二维码插件
export default {data() {const _this = this;return {qrcodeData: '',optionsObj: {canvasWidth: '300',canvasHeight: '300',text: 'https://www.baidu.com',logoUrl: ''},}},created() {this.generateQRCode();},methods: {generateQRCode(item) {try {// 使用qrcode.js生成二维码const url = this.optionsObj.text;QRCode.toDataURL(url,{width: parseInt(this.optionsObj.canvasWidth),height: parseInt(this.optionsObj.canvasHeight),color: {dark: '#2575fc',light: '#ffffff'},margin: 2},(err, url) => {if (err) {console.error(err);alert('生成二维码时出错：' + err.message);return;}this.qrcodeData = url;});} catch (error) {console.error(error);alert('生成二维码时出错：' + error.message);}},}
}
<script/>
以上就是vue根据链接生成二维码 qrcode的例子了，做过两次了，记录一下
啦啦啦啦
)
-02)
)
