vue实现画出页面二维码的3种办法

vue来制作二维码的办法有哪些？
这里我简单来介绍下三种办法；
方法一.利用vue-qart里自带的canvas来绘画二维码
步骤1：安装

npm install vue-qart --save

步骤2：在js中引入并注册成组件

import VueQArt from "vue-qart";
  components: {
    VueQArt,
  },

步骤3：在页面中使用

<vue-q-art :config="configs" :downloadButton="downloadButton"></vue-q-art>

方法二.利用qrcodejs来实现二维码
步骤1：安装

npm install qrcodejs2 --save

步骤2：在js中引入，注册成组件，并定义一个调用的方法

import QRCode from "qrcodejs2";
  components: {
    QRCode
  },
qrcode() {//这里是调用的方法
      let qrcode = new QRCode("qrcode", {
        width: 232, // 设置宽度
        height: 232, // 设置高度
        text: "https://baidu.com"
      });
    }
//以下是data中的数据
      downloadButton: false,
      configs: {
        value: "https://baidu.com",
        imagePath: "/static/1560242161(1).png",
        filter: "color"
      },

步骤3：在页面中使用

<div id="qrcode" ref="qrcode"></div>

步骤4：调用

this.$nextTick(function() {
  this.qrcode();
});

方法三.利用vue-qr来实现二维码
步骤1：安装

npm install vue-qr --save

步骤2：在js中引入并注册成组件，然后是在data里定义配置数据

import VueQr from 'vue-qr'
components: {
     VueQr
 },
  data() {
    return {
      config: {
          value: 'www.baidu.com',//显示的值、跳转的地址
          imagePath: require('../assets/logo.png')//中间logo的地址，require必要
      	  }
	  }
 	}

步骤3：在页面中使用

<vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :text="config.value" :size="200" :margin="0"></vue-qr>
<vue-qr style="float:left;margin-left:200px;" :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>
<vue-qr style="float:left;margin-left:200px;" :bgSrc='config.imagePath' :logoSrc="config.imagePath" :text="config.value" :size="200" :margin="0"></vue-qr>

*具体完整代码我已经放上来了

<template>
  <div class="hello">
    <vue-q-art :config="configs" :downloadButton="downloadButton"></vue-q-art>
    <hr>
    <div id="qrcode" ref="qrcode"></div>
    <hr>
    <vue-qr
      style="float:left;margin-left:200px;"
      :bgSrc="config.imagePath"
      :text="config.value"
      :size="200"
      :margin="0"
    ></vue-qr>

    <vue-qr
      style="float:left;margin-left:200px;"
      :logoSrc="config.imagePath"
      :text="config.value"
      :size="200"
      :margin="0"
    ></vue-qr>
    <vue-qr
      style="float:left;margin-left:200px;"
      :bgSrc="config.imagePath"
      :logoSrc="config.imagePath"
      :text="config.value"
      :size="200"
      :margin="0"
    ></vue-qr>
  </div>
</template>

<script>
import VueQArt from "vue-qart";
import QRCode from "qrcodejs2";
import VueQr from "vue-qr";

export default {
  data() {
    return {
      downloadButton: false,
      configs: {
        value: "https://baidu.com",
        imagePath: "/static/1560242161(1).png",
        filter: "color"
      },
      config: {
        value: "https://baidu.com", //显示的值、跳转的地址
        imagePath: require("../assets/logo.png") //中间logo的地址
      }
    };
  },
  components: {
    VueQArt,
    QRCode,
    VueQr
  },
  methods: {
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        width: 232, // 设置宽度
        height: 232, // 设置高度
        text: "https://baidu.com"
      });
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.qrcode();
    });
  }
};
</script>

<style>
#qrcode img {
  display: block;
  margin: 0 auto;
}
</style>

最后实现的效果：