vue根据链接生成二维码 qrcode

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的例子了，做过两次了，记录一下
啦啦啦啦