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的例子了，做過兩次了，記錄一下
啦啦啦啦