Vue 动态生成二维码 QRCode

想在页面中加入微信扫描二维码进行分享的功能，网上有demo: https://github.com/sinchang/vue-social-share

研究下QRCode 生成二维码吧，

引入：

npm install qrcode --save 

main.js中import： import QRCode from 'qrcode'

并在需要的组件中导入：  import QRCode from 'qrcode'

编写canvas :

<div>
      <canvas id="canvas"></canvas>
    </div>

------------js------------- 

useqrcode(txt) {
        //生成的二维码内容，可以添加变量
        var canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, txt, error=>{
          if (error) console.error(error)
          console.log('二维码 生成成功!');
        })
      }

全部代码：

<template>
  <div>
    <h1>测试二维码 plan</h1>
    <Button @click="useqrcode('111')">生成111</Button>
    <Button @click="useqrcode('222')">生成222</Button>
    <div>
      <canvas id="canvas"></canvas>
    </div>
  </div>
</template>

<script>
  import QRCode from 'qrcode'
  export default {

    data() {
      return {
        msg: '江南无所有、聊赠一枝春'
      }
    },
    mounted() {
      this.useqrcode(this.msg);
    },
    methods: {
      useqrcode(txt) {
        //生成的二维码内容，可以添加变量
        var canvas = document.getElementById('canvas')
        QRCode.toCanvas(canvas, txt, error=>{
          if (error) console.error(error)
          console.log('二维码 生成成功!');
        })
      }
    }
  }

</script>

<style>

</style>

效果：

来源：CSDN

作者：lileLife

链接：https://blog.csdn.net/lileLife/article/details/103846079